Posté sur
Il est temps de me familiariser avec le CSS moderne. Il y a tellement de nouveautés en CSS que je connais trop peu. Pour changer cela, j’ai lancé #100DaysOfMoreOrLessModernCSS. Pourquoi un CSS plus ou moins moderne ? Parce que certains sujets porteront sur des fonctionnalités de pointe, tandis que d’autres existent depuis un certain temps déjà, mais j’ai juste peu ou pas d’expérience avec cela.
La plupart des éléments n’ont pas de rapport d’aspect préféré. Au jour 42, j’ai expliqué comment vous pouvez utiliser le aspect-ratio propriété de définir un rapport pour ces éléments. Des éléments remplacés comme <iframe>, <video>, <embed>ou <img>, d’autre part, ont un rapport d’aspect intrinsèque. Cela signifie que vous n’avez pas à en définir un à l’aide de la aspect-ratio propriété et ils évolueront naturellement.
Vous pouvez modifier le format d’image d’une image à l’aide de aspect-ratio et définissant soit un height ou width avec une valeur autre que auto.
img {
width: 400px;
aspect-ratio: 1;
}La valeur par défaut du aspect-ratio la propriété est auto (selon l’élément, il s’agit soit d’aucun rapport d’aspect préféré, soit du rapport d’aspect naturel et intrinsèque.). Vous pouvez changer la valeur en un ratio (1, 16/9, 666/666etc.), ou vous pouvez faire les deux.
.autoAndRatio {
width: 400px;
aspect-ratio: auto 3 / 1;
}Si vous spécifiez tous les deux auto et un rapport ensemble, les éléments remplacés utiliseront leur rapport d’aspect naturel (auto) et tous les autres éléments le rapport spécifié (16 / 9).
<img src="/images/neue-donau.webp" alt="The danube river in Vienna." class="autoAndRatio">
<div class="autoAndRatio"></div>Voir sur CodePen.