Trick for Resizable and Responsive CSS Images

Note: I originally published this article on May 28, 2017 on a site I shut down as part of a purge.

Every once in a while in CodePen’s Popular or Picked section, you’ll come across a Pen name containing #dailycssimages. These Pens are vector images created using only HTML elements and CSS. These images usually consist of absolutely positioned elements formed using a variety of properties including border-radius, box-shadow, and sometimes clip-path. For plenty of examples, just do a search for the hashtag. I have been drawing some myself including this Longcat and radar animation. Yet, I’ve always wondered if there was a way to make them resizable or responsive.

I haven’t found too many examples of responsive CSS images in the wild. If responsive somewhat, you’ll find at least a few media queries in the code to define smaller or larger sizes. Just like responsive <img> elements, CSS images made responsive should gradually and proportionally increase or decrease in size if you resize the browser window. Moreover, it would save so much time if we could resize them manually like choosing a new width or height value for a certain <img> element (in CSS that is) and using auto for the other dimension. We may have scale() of the transform property, but the space the image occupies won’t be adjusted along with the image if used.

After endless tinkering, I finally found a way that seemed to be less complicated than I thought. I would like to share it with you, but please be advised, however, that it’s experimental only. There are few browser-related situations where it malfunctions.

Create or Find any Image

The first step is to draw everything like usual or grab an existing image. For this demo, we’ll use the teddy bear I drew above. Here’s its HTML and CSS:

Before we start pulling off the trick, verify that the parent container has a defined width and height. They must use an absolute unit (px, pt, pc, in, cm, or mm) in order to maintain a constant side-to-side ratio. Any selectors of child elements using absolute units must use the same type as that of the parent. In this case, .teddy is our parent container at 260px × 330px, and we have left the %s under .right-ear,..., .foot and .foot alone since they weren’t absolute.

Applying the Trick

Once we’re satisfied with the code, let’s add a font size to the container using a calc() expression. It shall divide a new width or height of the image by the original one. Just don’t add the unit to the original one because the divisor in calc() division must be a number. For our example we’ll choose a new width of 50vmin (for responsiveness) and divide it by the original width 260 (px dropped).

.teddy {
    font-size: calc(50vmin / 260);
    . . .
}

We could also use an expression that adds or subtracts different units as well like (300px + 5vw) as long as we keep everything before the slash and 260 in parentheses. %s used here though applies to font size only and yields different results in every browser.

After setting the font size, we replace every absolute unit out side of the calc() with em (you can speed up this process using your text editor’s Find and Replace tool). In this example we used px and replaced each px with em.

Finally, resize the window to see how the image increases or decreases in size proportionally!

(Demo)

If you got something awfully strange, refactor your code so that every element is inside one main container element with an absolute width and height. Ensure that you used a single type of absolute unit, too. If you feel you did everything correctly and the image still appears larger than it should, I’ll discuss why that happens in the next section.

Caveats

Whether this successfully worked or not, there are still two caveats to be aware of:

The Minimum Font Size Setting

If your image ended up being unusually large, here’s why: the browser has a setting for minimum font size, and it will force the result of the calc() we used to that font size if under. For instance, if the resulting font size is 2px and the minimum is 6px, then it remains at 6px. This will make every em 6px each thus causing the image to be ridiculously large. I discovered this by accident when for no reason I played with Chrome’s font settings. Since the default minimum font size is 1px and we did not touch that setting for this demo, we could use super small font size for resizing a CSS image in the way desired.

Additionally, according to some post about minimum font size in Chrome by Ian Lai, we would have been able to fix the minimum font size issue in every browser using the text-size-adjust property. Unfortunately, desktop browser support has been dropped a few years a ago (possibly due to accessibility issues).

calc() with Viewport Units in Safari

The other caveat is that if you provide a new length using vw, vh, vmin, or vmax, Safari will only calculate it on load and not on window resize. This happens to be a bug with using viewport units in calc() for font size, and there currently aren’t any workarounds I know of.

How It Works

The magic behind this is all in the font size and em. Since 1em is equal to the font size of the current element, font size will redefine what one unit of the image would be if we switched the units for everything else from that unit to em. If the font size were 10px for instance, every pixel of the image will be 10 times larger. Then, an image originally 50px wide would become 500px.

To show how we can choose a new width or height and get what we want though, we use calc(new_length / original_length) (remember, drop the unit for the original length!). Plus, it really doesn’t matter which absolute unit we choose to work with as long as we’re being consistent.

Conclusion

In a nutshell, we can enable CSS images to be proportionally resizable and responsive by:

1. Using calc(new_length / original_length) for the parent container’s font size

2. Swapping every absolute unit outside the calc() with em

Although there’s still some experimenting to do for improving the safety of use in production, this has been a huge step towards making pure CSS images as flexible as <img> elements and SVGs. This approach for responsive CSS images is the best I’ve found so far, and I hope you’ll enjoy trying it out!