How to round the height of an image with CSS

Lets say you want to render an image in an HTML document that uses round to round the height to some interval. Consider the following constraints: ¹

• The image needs to take up 100% of the width of the parent container
• The image needs to maintain its aspect ratio
• The image should have as little empty space as possible around it

In order to do this, we must first embed the aspect ratio of the image into the image's style attribute in the HTML code. For example: ¹

<figure>
<img
  src="20250516012109_crowd.jpg"
  style="--ratio:calc(4032/1794)"
  alt="The crowded showcase area in the Garage on the first day.">
</figure>

Next, we need to set the parent of the image to have container-type: inline-size, which allows us to access the cqi unit. This is how we're able to get the width of the parent while calculating the height. Our CSS will then look something like this, if our interval is in the --grid-size variable: ¹

figure:has(> img) {
    container-type: inline-size;

    img {
        width: 100%;
        height: round(up, calc(100cqi / var(--ratio)), var(--grid-size));
        object-fit: contain;
    }
}