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 Adding Sizes

Doron Geyer
seal-mask
.a{fill-rule:evenodd;}techdegree
Doron Geyer
Full Stack JavaScript Techdegree Student 13,897 Points
Posted by Doron Geyer
.a{fill-rule:evenodd;}techdegree
Doron Geyer
Full Stack JavaScript Techdegree Student 13,897 Points

after adding " 50vw, (min-width:1024px) 512px" image size no longer changes from medium

as mentioned adding

" 50vw,
                (min-width:1024px) 512px"

to the html it my browser no longer changes file size on the image at all. I have tried this in chrome and firefox dev edition. Before adding this code the browser still adjusts file sizes.

the code is as shown in the video I have just shortened the P tags here for space.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive Images</title>
    <link rel="stylesheet" href="css/normalize.css" />
    <link
      href="http://fonts.googleapis.com/css?family=Nunito:400,300"
      rel="stylesheet"
      type="text/css"
    />
    <link rel="stylesheet" href="css/main.css" />
    <script src="js/picturefill.min.js" async></script>
  </head>
  <body>
    <div class="wrapper">
      <img
        sizes=" 50vw,
                (min-width:1024px) 512px"
        srcset="img/banner-large.jpg 2048w, 
                img/banner-medium.jpg 1400w, 
                img/banner-medium.jpg 800w"
        src="img/banner-medium.jpg"
        alt="Nick pettit in front of some trees"
        class="banner-image"
      />
      <div class="content-block">
        <div class="profile-description">
          <div class="profile-image">
            <img
              srcset="img/photo-@2x.jpg 2x, img/photo-@1x.jpg 1x"
              src="img/photo-@2x.jpg"
              alt="photograph of a flower"
            />
          </div>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas

          </p>
          <p>
            Integer dignissim ultrices lacus tincidunt aliquet. Cras maximus
         .
          </p>
          <p>
            Cras blandit at urna sagittis consequat. Integer tristique mollis

          </p>
        </div>
      </div>
    </div>
  </body>
</html>

1 Answer

Chirag Mehta
Chirag Mehta
15,332 Points
Chirag Mehta
Chirag Mehta
15,332 Points

Hey Doron,

Don't know if you resolved this but I actually found your question while googling. I had the same issue and I think it's because Nick has a higher res display. I increased max-width of .wrapper in CSS and then updated sizes to match this larger width on .wrapper.

.wrapper {
  max-width: 1250px;
  margin: 0 auto;
}

sizes="(min-width: 1250px) 625px, 50vw"

That fixed the issue on my non-high res screen.