Echelle divs hauteur pure CSS

Question

Je dois redimensionner la hauteur des divs.

Comment ça devrait fonctionner

• Les divs doivent échelle, conserver les proportions actuelles
• La largeur doit être 100px toujours
• La hauteur devrait évoluer à la représentation proportionnelle à la 100px largeur
• J'ai ajouté quelques exemples de largeur et de hauteur dans le code
• Ajouter plus de HTML + CSS si nécessaire

Exemple

Un bloc div est à l'origine 300px x 600px. Lorsqu'il est ajusté à la largeur de 100px, il sera de 100px x 200px.

Le résultat

Le résultat sera tout aussi large divs mais ils seront différentes hauteurs, un peu plus grand que les autres.

https://jsfiddle.net/80pk066L/5/

Remarques

Si ce whould être une image, il contiendrait rapport d'aspect lors du réglage de largeur à 100%, mais ce n'est pas une image. C'est un div.

HTML

<ul> 
    <li class="scale1"><div></div></li> 
    <li class="scale2"><div></div></li> 
    <li class="scale3"><div></div></li> 
    <li class="scale4"><div></div></li> 
    <li class="scale5"><div></div></li> 
</ul> 

CSS

ul { 
    width: 300px; 
} 

li { 
    float: left; 
    background: red; 
    margin: 10px; 
    list-style: none; 
    display: block; 
    height: 100px; 
    width: 100px; 
    /*REMOVE HEIGHT AND WIDTH HERE, JUST DECORATION 
    Width should always be 100px 
    Height should be whatever, can be larger than 100px 
    */ 
} 

.scale1 div { 
    width: 300px; 
    height: 500px; 
} 

.scale2 div { 
    width: 400px; 
    height: 400px; 
} 

.scale3 div { 
    width: 200px; 
    height: 300px; 
} 

.scale4 div { 
    width: 50px; 
    height: 60px; 
} 

.scale5 div { 
    width: 150px; 
    height: 75px; 
} 

Answer 1

Vous pouvez utiliser une astuce de remplissage de fond pour forcer un rapport d'aspect réactif sur chaque élément individuel. Vous devrez calculer manuellement le fond de remplissage de chaque élément, en pourcentage du rapport hauteur/largeur.

.scale1 div { 
    padding-bottom: 166.667%; 
} 

.scale2 div { 
    padding-bottom: 100%; 
} 

.scale3 div { 
    padding-bottom: 150%; 
} 

.scale4 div { 
    padding-bottom: 120%; 
} 

.scale5 div { 
    padding-bottom: 50%; 
} 

Voir violon ici: https://jsfiddle.net/teddyrised/80pk066L/9/

Si vous voulez contenu dans chaque élément, cependant, ils doivent être enveloppés dans un élément enfant placé de façon absolue - c'est parce que si elles ne sont pas retirés du document débit, la hauteur du contenu ajoutera sur le rembourrage de fond, ce qui fausse donc le rapport d'aspect:

li div { 
    position: relative; 
} 
li div span { 
    position: absolute; 
    padding: 10px; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
} 

https://jsfiddle.net/teddyrised/80pk066L/10/

Si l'utilisation de CSS pour spécifier le format d'image est trop fastidieux, vous pouvez le faire par programmation en utilisant JS. Je comprends que vous ne voudrez peut-être pas réaliser cela en utilisant JS, mais cela pourrait être plus efficace si vous avez un grand nombre d'éléments que vous voulez passer en revue. Par souci de commodité, j'utilise jQuery, mais toutes les autres bibliothèques ou même JS premières travaillerais, aussi longtemps que la même logique est appliquée:

$(function() { 
    $('ul li').each(function() { 
     $(this).children('div').css('padding-bottom', $(this).width()/parseFloat($(this).data('aspect-ratio'))); 
    }); 
}); 

j'ai choisi de stocker le rapport d'aspect (sous la forme d'une largeur -à hauteur) dans un HTML5 data- attribut:

<ul> 
    <li class="scale1" data-aspect-ratio="0.6"><div><span>1</span></div></li> 
    <li class="scale2" data-aspect-ratio="1"><div><span>2</span></div></li> 
    <li class="scale3" data-aspect-ratio="0.667"><div><span>3</span></div></li> 
    <li class="scale4" data-aspect-ratio="0.833"><div><span>4</span></div></li> 
    <li class="scale5" data-aspect-ratio="2"><div><span>5</span></div></li> 
</ul> 

Voir la preuve de concept exemple ici: https://jsfiddle.net/teddyrised/80pk066L/11/

Answer 2

Vous pouvez y parvenir en utilisant des espaces réservés d'image: (fiddle si extrait de code ne fonctionne pas)

ul { 
 
    width: 300px; 
 
} 
 
li { 
 
    float: left; 
 
    background: red; 
 
    margin: 10px; 
 
    list-style: none; 
 
    display: block; 
 
    position:relative; 
 
    width:100px; 
 
} 
 
li img { 
 
    position: relative; 
 
    visibility: hidden; /* make sure it's hidden */ 
 
    width: 100%; 
 
    min-width: 100%; 
 
} 
 
li div { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    overflow:hidden; 
 
} 
 
/*.scale1 div { 
 
    width: 300px; 
 
    height: 500px; 
 
} 
 
.scale2 div { 
 
    width: 400px; 
 
    height: 400px; 
 
} 
 
.scale3 div { 
 
    width: 200px; 
 
    height: 300px; 
 
} 
 
.scale4 div { 
 
    width: 50px; 
 
    height: 60px; 
 
} 
 
.scale5 div { 
 
    width: 150px; 
 
    height: 75px; 
 
}*/

<ul> 
 
    <li class="scale1"> 
 
     <div></div> 
 
     <img src="http://placehold.it/300x500" alt="" /> 
 
    </li> 
 
    <li class="scale2"> 
 
     <div></div> 
 
     <img src="http://placehold.it/400x400" alt="" /> 
 
    </li> 
 
    <li class="scale3"> 
 
     <div></div> 
 
     <img src="http://placehold.it/200x300" alt="" /> 
 
    </li> 
 
    <li class="scale4"> 
 
     <div></div> 
 
     <img src="http://placehold.it/50x60" alt="" /> 
 
    </li> 
 
    <li class="scale5"> 
 
     <div></div> 
 
     <img src="http://placehold.it/150x75" alt="" /> 
 
    </li> 
 
</ul> 
 
<!-- - The divs should scale - The width of the div should be max 100px - The height should scale to what fit max 100px width - Remove li height and width. They are just for decoration -->

Answer 3

lieu de spécifier des largeurs et hauteurs exactes pour les divs, utilisez une combinaison de max-width et padding-bottom pour y parvenir. J'ai également pris la liberté de convertir votre mise en page d'utiliser des flottants à l'aide de flexbox à la place pour économiser le tracas d'avoir à effacer les flottants.

*{box-sizing:border-box;} 
 
ul{ 
 
    display:flex; 
 
    flex-flow:row wrap; 
 
    list-style:none; 
 
    margin:0; 
 
    padding:0; 
 
    width:100%; 
 
} 
 
li{ 
 
    background:green; 
 
\t flex:1 1 calc(33.333% - 20px); 
 
    margin:10px; 
 
    display:block; 
 
    max-width:calc(33.333% - 20px); 
 
} 
 
div{ 
 
    background:red; 
 
} 
 
.scale1 div{ 
 
    padding:0 0 166.667%; 
 
    max-width:300px; 
 
} 
 

 
.scale2 div{ 
 
    padding:0 0 100%; 
 
    max-width:400px; 
 
} 
 

 
.scale3 div{ 
 
    padding:0 0 150%; 
 
    max-width:200px; 
 
} 
 
.scale4 div{ 
 
    padding:0 0 120%; 
 
    max-width:50px; 
 
} 
 
.scale5 div{ 
 
    padding:0 0 50%; 
 
    max-width:150px; 
 
}

<ul> 
 
    <li class="scale1"><div></div></li> 
 
    <li class="scale2"><div></div></li> 
 
    <li class="scale3"><div></div></li> 
 
    <li class="scale4"><div></div></li> 
 
    <li class="scale5"><div></div></li> 
 
</ul>