Using max-width: 100% constrains the image to the container, but be careful when you use this with srcset-it may cap smaller than you want when using ! Pair with width: auto to fix this. Even though we have sources that are wider than 200px, we’ve capped the width at 200px. This is basically like saying max-width: 200px. No more blowout (with or without sizes) but now we have a new weird problem. Let’s put back the responsible thing and add in width and height attributes. See the little one below it where all I change is the sizes.Īnyway that’s not what Zach honed in on, but it’s similar. But, if the window is big enough, the image will render at its native size. It could also mean no wider than a relatively postitioned parent node. This could mean no wider than the browser window or device viewport. It really does effect layout (in all browsers I tested). 1 The snippet you provide says that the maximum width for the image is 100. I normally think of the sizes attribute as not information about anything to do with actual layout, but just information for the browser to choose a source. I think that’s because that’s the default sizes value. That won’t render at 200px or 400px-it’ll actually render at 100vw, believe it or not. If we just use srcset and set up multiple sources. Even if we slap max-width: 100% in the CSS, that’ll do what we want: preserving space, behave fluidly, and not growing bigger than it should.īut let’s hold off on the max-width: 100% thing for a second. We should be putting width and height attributes on images, because it allows the browser to make space for them even before they are downloaded ( even when they are fluid, which is super cool).
Say the original image is 400px wide, it renders 400px wide. With no other CSS involved, this renders at the “intrinsic size” of the image. I poked my way through, and in addition to the weird thing Zach noted, wanted to add one more thing. Most of it, I’d say, is what you’d expect, but things get weird when srcset gets involved. Zach takes a look at some fundamental HTML+CSS usage for fluid, responsive images.
0 kommentar(er)
