Image containment is one of the most tricky problems a beginner may encounter when using HTML and CSS. The core solution is to set an object fit value on the image in question, as this MDN guide demonstrates. That is
img {
object-fit: cover;
}
However, for the object-fit to behave properly, there needs to be a fixed value to inherit, be it in the object, or in the container.
This is easily solved if you do your own custom css stylesheets.
But this challenge can crop up in more unpredictable ways when it comes to designing theme templates for Content Management Systems (CMS). Ideally, a lot of web designs have certain image proportions or dimensions in mind. In fact, a lot of bespoke web designs rely on customized images or svgs to supplement limitations in the html and css, making graphic substitution not an easy task.
This is also a core pain point when merely copy pasting framework-based components online. You see snippets with images that have hard-coded widths and heights inline. This is prevalent in a lot of Bootstrap snippets, more so official ones. You also encounter snippets that gravely distort when used with images in a live project.
And none of these online solutions are able to anticipate the real-world scenario that some design components should not anticipate what image and image proportions will be used with them. They must not drastically break when a new graphic is used to replace the original or placeholder. Scenarios where designs cannot anticipate what images will be used with them include image grids, featured images, and website banners.
And a fixed width, auto height value utility class (i.e. Bootstrap's .img-fluid
), is unable to anticipate design distortions caused by images that are more vertical, or white spaces from images that are more horizontal.
But this is easily solved (albeit with hours of debugging on my part.) It involves three things:
- A parent container with fixed dimensions. In Bootstrap, the
col
class already has fixed widths according to breakpoints. However, for dedicated image columns, col class needs a fixed height as well. I found32rem
to be a pleasant default height for image containers. When trying this out, try plugging astyle="height: 32rem"
to yourcol
container and adjust accordingly. - An image wrapper that inherits the parent container. In Bootstrap, you'd have to add the utility classes
h-100 w-100
to this wrapper. - The image that inherits the wrapper dimensions and has object-fit value. In Bootstrap, you'd have to add the utility classes
h-100 w-100 object-fit-cover
to the image in question.
To demonstrate, here is a bootstrap5 component that you can use to test these values:
<section class="container">
<div class="row p-0 m-0">
<!-- Vertical -->
<div class="col p-0 m-0 border border-2" style="height: 32rem">
<div class="w-100 h-100">
<img src="assets/images/personvertical001.jpg" alt="" class=" h-100 w-100 object-fit-cover">
</div>
</div>
<!-- Horizontal -->
<div class="col p-0 m-0 border border-2" style="height: 32rem">
<div class="w-100 h-100">
<img src="assets/images/personhorizontal002.jpg" alt="" class=" h-100 w-100 object-fit-cover">
</div>
</div>
</div>
<div class="row p-0 m-0">
<!-- Square -->
<div class="col p-0 m-0 border border-2" style="height: 32rem">
<div class="w-100 h-100">
<img src="assets/images/personsquare001.jpg" alt="" class=" h-100 w-100 object-fit-cover">
</div>
</div>
<!-- Vertical -->
<div class="col p-0 m-0 border border-2" style="height: 32rem">
<div class="w-100 h-100">
<img src="assets/images/personvertical002.jpg" alt="" class=" h-100 w-100 object-fit-cover">
</div>
</div>
</div>
</section>
Feel free to test it out on your own sandbox with other images of varying orientations.
How would you handle image containment when creating themes?
CMSs usually gives you the means to call the image url. In your site interface, you would replace the src attribute with the template tag of the image url, so that you can conserve the classes. When it comes to content, having auto height and a fixed width is sufficient for images, as there is often a need to show the whole of the image without the controls of the image wrapper.
However, if the graphic might have too much verticality, you may want to craft options to restrain them. These include:
- Provide theme and interface hints that your theme component can only handle images of certain proportions.
- Craft a block or a snippet that can be used in place of a simple image tag. For WordPress, you have the options of creating patterns for images, or building up a block plugin.
- A more involved scenario would be to extend the editor or Markdown parser to render images a certain way. In WordPress Full-Site-Editing, images are actually rendered with a
<figure>
parent tag to allow for accessible caption markup via<figcaption>
. - Craft a custom css stylesheet that will restrain the dimensions of child object tags within the component that renders user generated content, so that they wouldn't cause too much distortion.