Calculateur de rapport hauteur/largeur CSS

Calculez et générez les valeurs des propriétés de rapport hauteur/largeur CSS.

Target Ratio

Width

Height

Preview

CSS snippets

Modern CSSRecommended

aspect-ratio: 16 / 9;

Legacy / IE Hack

position: relative;
padding-bottom: 56.25%;
height: 0;

"aspect-ratio" allows you to set the preferred ratio without hardcoding height, simplifying responsive images and iframes.

Overview

La propriété CSS aspect-ratio conserve les proportions des éléments quelle que soit la taille du conteneur. Indispensable pour les images, vidéos et cartes réactives. Remplacement moderne de la technique du padding-hack.

💡

Pro Tips

Provide a default aspect ratio for <img> elements to prevent 'Cumulative Layout Shift' during page load.
The padding-top/bottom trick works by basing the padding percentage on the parent's width.
You can now use `aspect-ratio` on almost all elements including divs, iframes, and videos.
If you provide both width and height PLUS an aspect-ratio, the width/height usually takes precedence in browsers.

Fun Facts

Formula: rapport hauteur/largeur : largeur/hauteur ; ou format d'image : 16 / 9 ;

Used with this

Similar tools that might be useful

Score d'acte

Calculez le score de l'acte.

Convertisseur ASCII

Convertissez le texte en codes ASCII et inversement. Utile pour la programmation et l'encodage des données.

Calculateur de taux d'acceptation

Calculez les taux d’acceptation à partir des données de candidature et d’admission. Visualisez la sélectivité avec des graphiques.