A number of days again CarolSaysThings posed what I anticipated to be a easy query till I began to query what I already knew. Carol had some picture markup (generated by Eleventy Image) and was asking one of the best ways to make the picture fluid (match the width of its container). I knew I understood this effectively sufficient to make use of it in my very own work however I began to understand that maybe I didn’t know this subject effectively sufficient to educate it so I dove in slightly deeper.

Main aim: I wish to check width: 100% versus max-width: 100% and the way these work together with [width][height] and srcset attributes.

Now, my normal take was to pop some width: 100% CSS on that factor and name it a day. width: 100% CSS forces the picture to refill the width of the container. This overrides any [width] attribute you’ve got set. This has the draw back that the picture can outgrow it’s personal dimensions and might seem blurry.

Every case beneath makes use of a 200×200 picture in each a 150px container (to shrink) and a 300px container (to develop).

width: 100%

With out [width][height]

Utilizing [width][height]

The 100% in max-width refers back to the container dimensions. Typically the [width] attribute will likely be smaller than this container, which suggests the picture won’t all the time be full width. Virtually talking, the picture won’t ever develop bigger than its personal inside or intrinsic dimensions.

One other method to consider this, the picture width can vary between 0 and [width], relying on the container dimension.

Editors be aware: the above part had a reasonably obvious error and was corrected due to @CarolSaysThings, @HarryMoore2409, and @nhoizey! Sorry about that, y’all.

max-width: 100%

With out [width][height]

Utilizing [width][height]

Let’s use srcset so as to add one other eligible picture width (now 200px and 400px) and see what occurs. Spoiler alert: no surprises right here! 🎉

srcset and width: 100%

With out [width][height]

Utilizing [width][height]

Conserving our two eligible picture widths in play (200px and 400px) let’s swap to make use of max-width: 100%.

srcset and max-width: 100%

With out [width][height]

Utilizing [width][height]

That is the place the rubber lastly meets the street. For me, the above check was probably the most shocking a part of the analysis—and why a deeper evaluation of this maybe introductory subject was worthwhile (for me).

Once I historically used width: 100% it bulldozed the [width] attribute. However a strict max-width: 100% now competes with the [width] attribute. One straightforward answer right here is so as to add width: auto to pair with our max-width: 100% CSS. That appears like this:

srcset and max-width: 100%

Utilizing [width][height] and width: auto

When Eleventy Image generates markup for multiple dimension, the <img> aspect makes use of the bottom dimension/high quality supply. However this conduct has me considering that when srcset is in play it ought to use the most important dimensions for the [width] and [height] attributes. I ponder what y’all take into consideration that? Virtually, it could appear like this:

srcset and max-width: 100%

Utilizing [width=”400″][height=”400″]

This makes max-width: 100% a bit extra predictable, because the rendered dimension now matches the conduct when [width][height] aren’t included or when width: auto was left off. The utmost width now accurately matches the intrinsic width of the most important picture in our srcset checklist.

Once more—virtually I might suggest to pair max-width: 100% with width: auto to repair this within the easiest method however this may assist keep away from some confusion for some of us that aren’t conscious of this.

Conclusions (aka TL;DR) #

• All of those approaches function the identical when the container is smaller than the picture.
• Utilizing width: 100% may give you some blurry pictures if you happen to’re not cautious along with your container sizes.
• Utilizing max-width: 100% constrains the picture to the container, however watch out once you use this with srcset—it could cap smaller than you need when utilizing [width]! Pair with width: auto to repair this.
• However maybe esoterically I’m strolling away with this remaining query: when you’ve got a number of picture sizes listed in a srcset checklist, which dimensions do you employ for the [width] and [height] attributes? I kinda wish to use the most important one—any apparent downsides to that?

Copy and Paste #

Scripting this weblog publish has swayed me to half from my width: 100% methods! I feel that is what my boilerplate will likely be transferring ahead (it renders just like the above example using width: auto):

img {
max-width: 100%;
}
img[width] {
width: auto; 
}
img[width][height] {
peak: auto; 
}

img[src$=".svg"] {
width: 100%;
peak: auto;
max-width: none;
}