A row of images is a quick way to discover how much a layout was relying on the sample content. One editor uploads a landscape photograph, another adds a portrait, and the tidy row starts behaving very differently.
I do not want to solve every variation by preparing another crop in an image editor. CSS can define the shape of the space, while the image still needs an appropriate source, useful alternative text and dimensions that describe the original file.
In this tutorial: What we are building; Before you start; 1. Set a ratio on the frame; 2. Choose between cropping and natural proportions; 3. Keep the image delivery sensible; Check the behaviour.
What we are building
A simple image frame that stays in a 4:3 proportion as its width changes. The photograph fills the frame without stretching. This is a layout example, not a reason to crop every image on a website.
Before you start
The aspect-ratio property is supported in current Chrome, Firefox and Safari releases, but check the browsers your project actually needs. Agree whether the image is decorative, explanatory or essential to the content before choosing a crop.
A product detail, a face or text inside an image can be lost when a photograph is forced into a different shape. That is a content decision as well as a CSS decision.
1. Set a ratio on the frame
<figure class="project-image">
<img src="project.jpg"
width="1600" height="1200"
alt="A description of the relevant image content">
</figure>.project-image {
margin: 0;
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.project-image > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}Four units of width correspond to three units of height. A 400-pixel-wide frame will therefore prefer a height of 300 pixels. object-fit: cover fills the frame while preserving the image's proportions, cropping the part that does not fit.
The example's width and height attributes describe the example file. Real image attributes should describe the real source. They are not arbitrary values to change until a screenshot looks right.
2. Choose between cropping and natural proportions
For a photograph in a project index, a consistent frame can make the list easier to scan. For a diagram, screenshot or image containing text, I may want the whole thing visible instead.
If the image should keep its own proportions, the simpler rule is often enough:
.article-image {
display: block;
max-width: 100%;
height: auto;
}I also avoid treating aspect-ratio as an unconditional command. It provides a preferred ratio; other size constraints, explicit dimensions and the element's content can affect the final layout. Setting both a fixed width and fixed height may leave the ratio with nothing useful to determine.
3. Keep the image delivery sensible
A predictable frame does not make a large download smaller. In WordPress I still want attachment-based responsive images, suitable source sizes and the correct sizes information for the layout.
Space reserved for an image can help prevent content moving when it loads. That is one reason to preserve meaningful intrinsic dimensions rather than remove them from the markup and rely on appearance alone.
Check the behaviour
Try portrait and landscape sources. Resize the frame, check whether the important subject remains visible and inspect the result at a narrow viewport. Test a missing image and a slow connection as well as the ideal screenshot.
For a caption, keep the caption outside the clipped image frame or use a wrapper that applies the ratio only to the media. Otherwise it is easy to constrain text accidentally along with the photograph.
I like this property because it lets the design express the shape it needs quite directly. The useful part is making the relationship predictable, while leaving room for the content to tell me when a fixed crop is the wrong choice.
References
MDN's aspect-ratio reference describes how the preferred ratio interacts with sizing. The HTML image element reference covers intrinsic dimensions and responsive image attributes.