Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML Responsive Images Image Delivery with Srcset and Sizes Using Srcset

Warner Cyr
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Warner Cyr
Front End Web Development Techdegree Graduate 21,047 Points
Posted by Warner Cyr
.a{fill-rule:evenodd;}techdegree seal-36
Warner Cyr
Front End Web Development Techdegree Graduate 21,047 Points

The pixel density descriptor of 2x isn't working for the banner image, only shows when using 1x.

I'm using the same code in workspaces as it is shown in the video, could this be a browser issue?

<div class="profile-image"> <img srcset="img/banner-small.jpg 2x, img/photo-@1x.jpg 1x" src="img/photo-@1x.jpg" alt="Photograph of a flower." /> </div>

1 Answer

Jelena Feliciano
seal-mask
.a{fill-rule:evenodd;}techdegree
Jelena Feliciano
Full Stack JavaScript Techdegree Student 12,729 Points
Jelena Feliciano
.a{fill-rule:evenodd;}techdegree
Jelena Feliciano
Full Stack JavaScript Techdegree Student 12,729 Points

Dang I'm having the same issue. I didn't think to change to 1x to see if that worked until I read this and sure enough it worked but when I tried 2x it didn't work. I tried to screen shot my workspace and display it here but this area doesn't seem to like that format so I'm not sure how to ask a question in these areas.