The aspect-ratio property sets the proportion between width and height. It removes the old padding hack and prevents layout shift while images and videos load, which helps your Core Web Vitals score.

Common ratios

.lotgrafix-video {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.lotgrafix-square {
    aspect-ratio: 1 / 1;
}

.lotgrafix-card-image {
    aspect-ratio: 4 / 3;
}

Crop an image to a ratio

.lotgrafix-thumb img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

Responsive YouTube embed

<iframe class="lotgrafix-video" src="https://www.youtube.com/embed/VIDEO_ID" allowfullscreen></iframe>

.lotgrafix-video {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
}

Reserve space for images

Always set width and height attributes on your images. Browsers use them to calculate the ratio before the file loads.

img {
    max-width: 100%;
    height: auto;
}