The object-fit property controls how an image or video fills its box. It lets you crop images to a fixed size without distorting them.

Values

• cover: fills the box and crops the overflow. Most commonly used.
• contain: shows the whole image inside the box, leaving empty space if needed.
• fill: stretches the image to the box. This is the default and can distort it.
• none: keeps the original size.
• scale-down: uses none or contain, whichever gives the smaller image.

Uniform thumbnails

.lotgrafix-thumb img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

Change the focal point

Use object-position to choose which part of the image stays visible.

.lotgrafix-thumb img {
    object-fit: cover;
    object-position: top center;
}

Full background video

.lotgrafix-hero video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}