![]() 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. It really does effect layout (in all browsers I tested). 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. It wasnt until 1993 when the web browser Mosaic was launched, that text and images could be. 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. Nexus was the first web browser and was completely text-based. 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 Comments
Leave a Reply. |