0
253
ViewsEn CSS Cómo diseñar una fila de imágenes con varias relaciones de aspecto para que ocupen todo el espacio disponible en la fila
En mi página web html/css/js tengo una fila de 5 imágenes como esta:
Tienen diferentes relaciones de aspecto. El html se ve así:
<div id="row1"> <img src='img1.jpg'/> <img src='img2.jpg'/> <img src='img3.jpg'/> <img src='img4.jpg'/> <img src='img5.jpg'/> </div>Me gustaría asegurarme de que siempre ocupen tanto espacio horizontal en su contenedor (aquí fila 1) como puedan, bajo las condiciones dadas:
- su altura es la misma para todas las fotos en la fila dada
- no se estiran
- no se recortan ni se superponen
En resumen, su altura debe ajustarse para que su ancho combinado llene el ancho de su contenedor principal.
Estaba investigando css flexbox y la biblioteca de tipos de mampostería, pero no logré encontrar una implementación exitosa.
Preferiría una solución CSS pura, pero un javascript simple estaría bien. Mi solución actual consiste en calcular la altura de la fila en js a partir del ancho de las imágenes y actualizar el estilo de cada una. (No es muy escalable, ni confiable, y bastante desigual ya que js actualiza las alturas de las filas. Espero tener miles de estas filas en la página)
1 answers
Answer question0
No tenemos que hacer el cálculo para cada imagen; el sistema lo hará por nosotros en el sentido de que si configuramos la fila con las imágenes a la altura de la fila (cualquier altura servirá), podemos obtener el ancho. Esto nos da una relación ancho/alto.
Luego, sabiendo el ancho final que queremos que tenga la fila, podemos calcular la altura final.
let row = document.querySelector('#row'); function sizeRow() { row.style.height = '100px'; // any height will do - we just want to get a proportion row.style.height = 'calc(var(--requiredWidth) * ' + 100 / row.offsetWidth + ')'; row.style.opacity = 1; } window.onload = sizeRow; window.onresize = sizeRow; * { margin: 0; padding: 0; } #row { --requiredWidth: 100vw; white-space: nowrap; display: inline-block; opacity: 0; /* just so we dont see a flashing while resizing */ font-size: 0; /* remove white space between images */ } #row img { height: 100%; display: inline-block; } <div id="row"> <img src='https://picsum.photos/id/1015/200/300' /> <img src='https://picsum.photos/id/1016/300/300' /> <img src='https://picsum.photos/id/1018/300/200' /> <img src='https://picsum.photos/id/1019/1000/200' /> <img src='https://picsum.photos/id/1021/200/1000' /> </div>