Responsive images

a bit confused here…

i have found multiple instructions for responsive images

from codecademy

.container {
width: 50%;
height: 200px;
overflow: hidden;

.container img {
max-width: 100%;
height: auto;
display: block;

a media query using min-width and max-width

<img src=“sample.jpg” width=“100” height=“200”


img {width: 100%; max-width 100%; height : auto;

i know that last one is similar to the first, but coded differently

ultimately i am after the best way to code images responsively

any thing and everything is welcome!

many thanks!


The best way is often defined by context (hence, all the different ways :slight_smile: ).

The media queries will basically let you target how your image should look in different devices (you can use the browser tools to simulate what phones and tables see… access with right-click, inspect-element, and find the phone button).

Setting a percentage width is useful but there are some contexts where you wouldn’t use it (again, depending on what you’re doing).

The best way to get a good sense of how they are useful is by trying to make sample websites and try really strictly to get a layout you want in each mode (desktop, tablet, tablet-rotated, mobile, mobile-rotated).

1 Like