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

Bayern Munich's Jamal Musiala is taken off the field after an injury during the Club World Cup quarterfinal soccer match against PSG

Jamal Musiala: Bayern Munich attacker suffers serious injury after Gianluigi Donnarumma clash in Club World Cup quarter-final defeat against PSG | Football News

Bayern Munich boss Vincent Kompany says the serious injury suffered by Jamal Musiala in their Club World Cup quarter-final defeat to Paris Saint-Germain had his “blood boiling” in frustration. PSG goalkeeper Gianluigi Donnarumma collided with Musiala just before half-time and the Germany international’s ankle was caught in the challenge. Musiala had to be stretchered off

Access Denied

Access Denied You don’t have permission to access “http://www.foxnews.com/us/texas-police-officer-shot-near-ice-detention-center-trump-officials-promise-zero-tolerance” on this server. Reference #18.b9e43e17.1751789926.45b01441 https://errors.edgesuite.net/18.b9e43e17.1751789926.45b01441

FILE - Debris of an aircraft lie in the compound of a mosque at Pampore in Pulwama district of Indian controlled Kashmir, Wednesday, May 7, 2025. (AP Photo/Dar Yasin, File)

China used embassies to undermine sales of France’s flagship Rafale fighter jet

Sales of Rafales and other armaments are big business for France’s defense industry and help efforts by the government in Paris to strengthen ties with other nations, including in Asia where China is becoming the dominant regional power. France is fighting what it calls a disinformation campaign against the Rafale Pakistan claimed its air force

Health Check

Breakthrough gene therapy jab reverses hearing loss in weeks

Sign up for our free Health Check email to receive exclusive analysis on the week in health Get our free Health Check email Get our free Health Check email A single jab of a breakthrough gene therapy could reverse hearing loss in people within weeks, according to new research. The cutting-edge therapy improved hearing in

Hong Kong cancels T1 signal as Typhoon Danas moves away

Hong Kong cancels T1 signal as Typhoon Danas moves away

This story has been made freely available as a public service to our readers. Please consider supporting SCMP’s journalism by subscribing. New users who download our updated app get a seven-day free trial. The Hong Kong Observatory cancelled the No 1 warning signal on Sunday afternoon as Typhoon Danas moved away from the city, with

Silver 06/07/2025

Weekly Pairs in Focus – July 06

Silver has been very bullish during the past week, but as you can see from the weekly chart, the market continues to bounce around $35 on the bottom and the $37.50 level above. All things being equal, this is a market that continues to be very noisy, and I think this is a situation where

Ontario Emerges As The Ideal Destination For European Tourists Amid U.S. Entry Challenges, With The United Kingdom And Germany Leading The Shift

Ontario Emerges As The Ideal Destination For European Tourists Amid U.S. Entry Challenges, With The United Kingdom And Germany Leading The Shift

Home » America Travel News » Ontario Emerges As The Ideal Destination For European Tourists Amid U.S. Entry Challenges, With The United Kingdom And Germany Leading The Shift Sunday, July 6, 2025 As U.S. entry policies become increasingly restrictive and political tensions continue to rise, European tourists are turning their attention to Ontario as the

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