Est-il possible de définir la largeur d'un bloc div en fonction de sa hauteur?Puis-je définir la largeur d'un bloc div en fonction de sa hauteur?
Par exemple, j'ai un bloc dont la hauteur dépend du parent et je veux définir sa largeur en fonction de sa hauteur.
Voici une astuce pour le faire, où vous pouvez ajouter une image avec 1: 1 chez l'enfant
.parent {
height: 250px;
}
.child {
height: 100%;
display: inline-block;
background:#333;
}
.child img {
height: 100%;
position: relative;
opacity:0;
}<div class="parent">
<div class="child">
<img src="https://dummyimage.com/350x350/ffffff/ffffff" />
</div>
</div>Cela fonctionne-t-il sur la taille dynamique? – Bozgorian
bien sûr, vous pouvez vérifier en augmentant la taille des parents –
J'utiliserions la largeur et la hauteur par rapport à la largeur de la fenêtre. Comme ceci:
Div { Largeur: 50vw; Hauteur: }
seulement par javascript – Chris
pas seulement avec css. Vous aurez besoin de javascript, ou le calculer avec le code côté serveur (bien que ce dernier nécessiterait une taille fixe que vous connaissez avant le rendu) – musefan
Avec css, vous pouvez seulement définir un ratio en fonction de la hauteur ou de la largeur, mais pour plus vous aurez besoin de javascript. Vérifiez ce lien: http://www.mademyday.de/css-height-equals-width-with-pure-css.html –