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

Doron Geyer
seal-mask
.a{fill-rule:evenodd;}techdegree
Doron Geyer
Full Stack JavaScript Techdegree Student 13,884 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,331 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.