Skip to main content

Ratio

Ces classes CSS permettent de définir le ratio d'un élément parent. Elles sont utiles pour assurer un aspect cohérent à des éléments contenus, comme une image ou une vidéo.

Ratio 16:9​

Description de l'image
HTML
    <div class="ratio-16x9">
        <img src="path/to/image" alt="Description de l'image" />
    </div>

Ratio 1:1​

Description de l'image
HTML
    <div class="ratio-1x1">
        <img src="path/to/image" alt="Description de l'image" />
    </div>

Ratio 4:3​

Description de l'image
HTML
    <div class="ratio-4x3">
        <img src="path/to/image" alt="Description de l'image" />
    </div>

Cover​

Description de l'image
HTML
    <div class="bg-cover">
        <img src="path/to/image" alt="Description de l'image" />
    </div>