0
352
VistasCómo ajustar la altura para imágenes con diferentes alturas
Quiero poner mis fotos según el siguiente plan:
ul { display: flex; flex-wrap: wrap; justify-content: space-between; } ul > li { width: 49%; } ul > li img { width: 100%; margin-block-end: 0.25rem; } <ul> <li> <img src="img/study-image-1.png" alt=""> </li> <li> <img src="img/study-img-3.png" alt=""> </li> <li> <img src="img/study-img-2.png" alt=""> </li> <li> <img src="img/study-img-4.png" alt=""> </li> </ul> 
Pero cuando hice mi diseño basado en el siguiente código, fue así. 
Gracias de antemano por su cooperación
3 Respuestas
Responde la pregunta0
¿Quieres algo así?, no necesitas javascript
https://codepen.io/marcosefrem/pen/KKXELPy
<ul> <li> <img src="https://picsum.photos/500/400" alt=""> </li> <li> <img src="https://picsum.photos/100/50" alt=""> </li> <li> <img src="https://picsum.photos/200/200" alt=""> </li> <li> <img src="https://picsum.photos/100/400" alt=""> </li> <li> <img src="https://picsum.photos/500/400" alt=""> </li> <li> <img src="https://picsum.photos/100/50" alt=""> </li> <li> <img src="https://picsum.photos/200/200" alt=""> </li> <li> <img src="https://picsum.photos/100/400" alt=""> </li> </ul> <style> ul { column-count: 3; column-gap: 1.25rem; } li { break-inside: avoid-column; position: relative; display: inline-block; width: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; } li img {width:100%; object-fit:cover} </style>0
Para este diseño bastante sencillo en el que se debe saber que las relaciones de aspecto de las dos imágenes más grandes son las mismas que las relaciones de aspecto de las dos imágenes más pequeñas, podría usar CSS de dos columnas:
ul { columns: 2; width: 50vw; font-size: 4px; } li img { width: 100%; height: auto; margin: 2px 0 2px 0; } <ul> <li><img src="https://picsum.photos/id/1016/100/50"></li> <li><img src="https://picsum.photos/id/1015/200/300"></li> <li><img src="https://picsum.photos/id/1016/200/300"></li> <li><img src="https://picsum.photos/id/1015/100/50"></li> </ul>Nota: el espacio vertical depende del tamaño de la fuente, de ahí que los 4 píxeles coincidan con los 2x2 píxeles de los márgenes. Obviamente, querrá ajustar esto y el ancho de todo para satisfacer sus necesidades particulares.
0
También se puede usar from divs en lugar de ul y li :
.container { width: 300px; grid-template-rows: 100px 100px 100px; display: grid; grid-template-areas: 'one tow' 'tree tow' 'tree four'; grid-gap: 10px; } img { width: 100%; height: 100%; margin-block-end: 0.25rem; } .item1 { grid-area: one; } .item2 { grid-area: tow; } .item3 { grid-area: tree; } .item4 { grid-area: four; } <div class="container"> <div class="item1"> <img src="https://s4.uupload.ir/files/7560b48482bfae5c-02b97ffc647f-3822363654_tji3.jpg" alt=""> </div> <div class="item2"> <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" alt=""> </div> <div class="item3"> <img src="https://s4.uupload.ir/files/717195_346_g0du.jpg" alt=""> </div> <div class="item4"> <img src="https://s4.uupload.ir/files/0.270967001322580170_jazzaab_ir_ajvv.jpg" alt=""> </div> </div>