Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML Responsive Images Image Delivery with Srcset and Sizes Adding Sizes

Thomas Dimnet
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Thomas Dimnet
Python Development Techdegree Graduate 43,610 Points
Posted by Thomas Dimnet
.a{fill-rule:evenodd;}techdegree seal-36
Thomas Dimnet
Python Development Techdegree Graduate 43,610 Points

Sizes values: need some help!

Ok, so I went to the MDN docs and see this:

<img 
  src="clock-demo-thumb-200.png" 
  alt="Clock"
  srcset="clock-demo-thumb-200.png 200w,
               clock-demo-thumb-400.png 400w"
  sizes="(min-width: 600px) 200px, 50vw"
>

It means: when the (min-width: 600px) media condition matches, the image will be 200px wide. Otherwise it will be 50vw wide (50% of the viewport width).

In our case, when Nick writes that:

<img 
  sizes="50vw, (min-width: 1024px) 512px"
>

It means: the image will be 50vw wide but the media condition matches. If the media condition matches, it will be 512px wide. Am I correct?

If yes: when do the sizes of the image change? I do not get it.

Thomas.

3 Answers

Steven Parker
Steven Parker
216,012 Points
Steven Parker
Steven Parker
216,012 Points

:point_right: Remember that sizes does not change the dimensions of the image.

The actual image dimensions is controlled by the CSS width (or min-width or max-width) setting.

All the sizes attribute does is provide information to the browser to help choose which of the srcset images to use.

Thomas Dimnet
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Thomas Dimnet
Python Development Techdegree Graduate 43,610 Points
Thomas Dimnet
.a{fill-rule:evenodd;}techdegree seal-36
Thomas Dimnet
Python Development Techdegree Graduate 43,610 Points

Thanks Steven, I just get it a few minutes ago! The other thing I have to keep in mind: "Chrome will always use the largest image available in the cache"! So if I resize the browser window, it is perfectly normal to have some issues :) (for now!)

Ran ShemTov
Ran ShemTov
14,148 Points
Ran ShemTov
Ran ShemTov
14,148 Points

If you use max-width 100% you'll usually end up with an image scaling up to it's parent div.