Barebones CSS for Fluid Images

6dfd7ac6-200.jpeg

A few days back CarolSaysThings’s AvatarCarolSaysThings posed what I expected to be a simple question until I started to question what I already knew. Carol had some image markup (generated by Eleventy Image) and was asking the best way to make the image fluid (match the width of its container). I knew I understood this well enough to use it in my own work but I started to realize that perhaps I didn’t know this topic well enough to teach it so I dove in a little deeper.

Primary goal: I want to test width: 100% versus max-width: 100% and how those interact with [width][height] and srcset attributes.

Now, my usual take was to pop some width: 100% CSS on that thing and call it a day. width: 100% CSS forces the image to fill up the width of the container. This overrides any [width] attribute you have set. This has the downside that the image can outgrow it’s own dimensions and can appear blurry.

Each case below uses a 200×200 image in both a 150px container (to shrink) and a 300px container (to grow).

width: 100%

Without [width][height]

The sample Nebula Image from Unsplash on the Eleventy Image docs
The sample Nebula Image from Unsplash on the Eleventy Image docs

Using [width][height]

The sample Nebula Image from Unsplash on the Eleventy Image docs
The sample Nebula Image from Unsplash on the Eleventy Image docs

The 100% in max-width refers to the container dimensions. Sometimes the [width] attribute will be smaller than this container, which means the image will not always be full width. Practically speaking, the image will never grow larger than its own internal or intrinsic dimensions.

Another way to think about this, the image width can range between 0 and [width], depending on the container size.

Editors note: the above section had a pretty glaring error and was corrected thanks to @CarolSaysThings, @HarryMoore2409, and @nhoizey! Sorry about that, y’all.

max-width: 100%

Without [width][height]

The sample Nebula Image from Unsplash on the Eleventy Image docs
The sample Nebula Image from Unsplash on the Eleventy Image docs

Using [width][height]

The sample Nebula Image from Unsplash on the Eleventy Image docs
The sample Nebula Image from Unsplash on the Eleventy Image docs

Let’s use srcset to add another eligible image width (now 200px and 400px) and see what happens. Spoiler alert: no surprises here! 🎉

srcset and width: 100%

Without [width][height]

The sample Nebula Image from Unsplash on the Eleventy Image docs
The sample Nebula Image from Unsplash on the Eleventy Image docs

Using [width][height]

The sample Nebula Image from Unsplash on the Eleventy Image docs
The sample Nebula Image from Unsplash on the Eleventy Image docs

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

srcset and max-width: 100%

Without [width][height]

The sample Nebula Image from Unsplash on the Eleventy Image docs
The sample Nebula Image from Unsplash on the Eleventy Image docs

Using [width][height]

The sample Nebula Image from Unsplash on the Eleventy Image docs
The sample Nebula Image from Unsplash on the Eleventy Image docs

This is where the rubber finally meets the road. For me, the above test was the most surprising part of the research—and why a deeper analysis of this perhaps introductory topic was worthwhile (for me).

When I traditionally used width: 100% it bulldozed the [width] attribute. But a strict max-width: 100% now competes with the [width] attribute. One easy solution here is to add width: auto to pair with our max-width: 100% CSS. That looks like this:

srcset and max-width: 100%

Using [width][height] and width: auto

The sample Nebula Image from Unsplash on the Eleventy Image docs
The sample Nebula Image from Unsplash on the Eleventy Image docs

When Eleventy Image generates markup for more than one size, the <img> element uses the lowest size/quality source. But this behavior has me thinking that when srcset is in play it should use the largest dimensions for the [width] and [height] attributes. I wonder what y’all think about that? Practically, it would look like this:

srcset and max-width: 100%

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

The sample Nebula Image from Unsplash on the Eleventy Image docs
The sample Nebula Image from Unsplash on the Eleventy Image docs

This makes max-width: 100% a bit more predictable, as the rendered size now matches the behavior when [width][height] are not included or when width: auto was left off. The maximum width now correctly matches the intrinsic width of the largest image in our srcset list.

Again—practically I would recommend to pair max-width: 100% with width: auto to fix this in the easiest way but this might help avoid some confusion for some folks that aren’t aware of this.

Conclusions (aka TL;DR) #

  • All of these approaches operate the same when the container is smaller than the image.
  • Using width: 100% can give you some blurry images if you’re not careful with your container sizes.
  • 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 [width]! Pair with width: auto to fix this.
  • But perhaps esoterically I’m walking away with this remaining question: when you have multiple image sizes listed in a srcset list, which dimensions do you use for the [width] and [height] attributes? I kinda want to use the largest one—any obvious downsides to that?

Copy and Paste #

Writing this blog post has swayed me to part from my width: 100% ways! I think this is what my boilerplate will be moving forward (it renders like the above example using width: auto):

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


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


This post was originally posted here

Check out our Starter Sites built with #ToolWeLove including Toolset, Elementor Pro, and Astra Pro.

 

Share this page
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on email
How to Choose WordPress Hosting

Pixallus WordPress Hosting. Simplified. Enjoy blazing fast WordPress website loading speeds and 99.9% uptime. Whether you’re a freelancer, small business, or a large organization, we

Read More »
Critical Vulnerability Patched in WooCommerce Upload Files

https://www.wordfence.com/wp-content/uploads/2021/03/critical-vulnerability-patched-in-woocommerce-upload-files-1024×536.jpg On December 29, 2020, the Wordfence Threat Intelligence team was alerted to a potential 0-day vulnerability in the WooCommerce Upload Files plugin, an add-on

Read More »