Many of my Advent of Patterns blog posts contain visuals that accompany the text. This is different from much of my previous writing which was text-focused; technical guides, poetry, musings.

When looking through my posts, I noticed that some of the details of the images were hard to grasp because they were too small. I was trying to fit the images in a container designed for text: a container whose maximum width was set to be most readable for text, without particular consideration for images.

This got me thinking: how can I make my blog images bigger so they are easier to read?

I decided to follow in the footsteps of the BBC and create a design that lets images be wider than the main content container, but only on the right side.

Letting the content grow only on the right side is important because I have a sidebar on the left side of the page. If the image was wider on both sides, the image may overlap with the sidebar. I love the pattern of making an image wider on both sides, but it works best on center-aligned text with plenty of space on either side. My website, on the other hand, uses two columns that are close together.

I had two requirements:

1. The image should be wider on the right side, and;
2. The minimum size for the image should be equal to the width of the text column.

I implemented this using the following CSS rule to img tags in my blog posts:

width: clamp(100%, 130%, 65vw);

The CSS clamp attribute lets you specify a minimum, preferred, and maximum value. The browser will then compute which value to use that matches those specifications. In this case, I say that I want images to :

• Have a minimum width of 100%. This means the maximum size of the content container, which is around 35rem.
• Have a preferred width of 130%. This allows the image to grow outside the container without getting too big.
• Have a maximum width of 65vw.

With this one rule, I can have images that are bigger than the parent container that scale at different resolutions.

The following video shows an image scaling as the browser is resized:

This change makes it much easier to see the details in images on bigger screens that were previously confined to a much smaller space.

If you have any suggestions on how to make this feature better, please let me know!