Making images bigger on my website


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.

A BBC article with an image that grows outside the text container

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!



Source link

Visited 2 times, 1 visit(s) today

Related Article

Hong kong’s

Hong Kong’s “Summer Viva” Program Welcomes Vietnamese Tourists With Over 150 Exclusive Offers Across Attractions, Hotels, And Transportation

Home » Hong Kong News » Hong Kong’s “Summer Viva” Program Welcomes Vietnamese Tourists With Over 150 Exclusive Offers Across Attractions, Hotels, And Transportation Saturday, July 5, 2025 Hong Kong is positioning itself as the ultimate summer destination, offering a perfect blend of entertainment, relaxation, and shopping. Through its “Summer Viva” tourism program, the city

How Everyday Investors Are Picking Stocks Without Wall Street Knowledge

How Everyday Investors Are Picking Stocks Without Wall Street Knowledge

Say goodbye to Excel spreadsheets, financial statements, and fancy Bloomberg terminals. Some everyday investors have a secret weapon that’s leading to winning stock picks. Bob Vanscoy bought Nvidia in 2020, years before the AI boom propelled the company to its current position as the world’s most valuable company. The 54-year-old father of two invested after

Access Denied

Access Denied You don’t have permission to access “http://www.hindustantimes.com/india-news/pm-modi-in-brazil-for-brics-summit-trump-tariffs-likely-in-groups-focus-whats-on-agenda-101751769013437.html” on this server. Reference #18.a7753617.1751778565.11a32531 https://errors.edgesuite.net/18.a7753617.1751778565.11a32531

What’s new at Hong Kong Disneyland as it celebrates its 20th anniversary? 

What’s new at Hong Kong Disneyland as it celebrates its 20th anniversary? 

MANILA, Philippines – Can the happiest place on earth get even happier?  When it’s celebrating a huge milestone, it most definitely can.  Hong Kong Disneyland already boasts unique attractions like “World of Frozen” — considered the first and largest Frozen-themed village within the parks across the world —  and Mystic Manor, which many people would argue is

29 Hong Kong students achieve top scores in IB exam despite tricky maths section

29 Hong Kong students achieve top scores in IB exam despite tricky maths section

At least 29 students in Hong Kong have achieved top marks in the International Baccalaureate (IB) programme, even after a global outcry from test-takers over concerns that the mathematics subject was too difficult. More than 2,600 Hong Kong students sat this year’s IB exam on May 15, 16 and 21, showing a nearly 20 per

Person sitting at a desk working on a laptop.

2 Unstoppable Growth Stocks to Hold for the Next 20 Years

The stock market has an incredibly impressive long-term track record of wealth creation, and we can reasonably expect it to continue delivering excellent returns over the next 20 years. Investors can capitalize on this by buying ETFs that track major indexes, or by investing in individual stocks that can perform as well, if not better,

0
Would love your thoughts, please comment.x
()
x