object-fit: photo in a frame without stretching

Useful to know

When the picture and its frame have different proportions, , object-fit determines how the content fits into the specified dimensions. In contain, the entire image is retained, but empty space can remain. In cover, the frame is filled, and part of the image can be cut. Both values retain proportions. [1]

For a card measuring 320 by 180 pixels, the example is img { width: 320px; height: 180px; object-fit: cover; }. The photo will not be flattened, but a face near the end may go beyond the visible part. This is an example of a layout, not a promise of a suitable frame for each photo.

For a technical scheme or photo of a document, contain is usually a more appropriate choice: the cut-out content may carry information. The property governs the content of the element; the dimensions of the frame itself are set separately.