Hola, quiero colocar 10 imágenes en una fila de ancho de pantalla completa manteniendo una relación de aspecto 4:3
Pregunta: quiero colocar exactamente 10 imágenes en una fila de ancho completo manteniendo la relación de aspecto 4:3
de las imágenes
Nota: mi caso de uso es para el guión gráfico que no tendrá ningún espacio entre las imágenes
así es como se representa mi código actual
esto es lo que he intentado
ul { height: 100%; list-style: none; display: flex; padding: 0; margin: 0; } li { height: 100%; display: flex; list-style: none; justify-content: center; } img { width: 100%; height: 100%; }
<div style="width:100vw;height:71px;border:1px solid red;"> <ul> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/> </li> </ul> </div>
por favor ayúdenme gracias de antemano!!
ul { height: 100%; list-style: none; display: flex; padding: 0; margin: 0; } li { padding: 0; margin: 0; width:10%; list-style: none; justify-content: center; } img { max-width: 100%; max-height: 75%; }
<div style="width:100vw;height:71px;border:1px solid red;"> <ul> <li> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png"/> </li> </ul> </div>
use ancho 10% para dividir en 10 fases y para cambio de relación 4: 3 img css max-height: 75% & max-width: 100%
Puede utilizar aspect-ratio: 4 / 3;
la propiedad y para la imagen necesitan usar object-fit: cover;
propiedad para cubrir el tamaño del elemento li
.
2do alcance: si elimina height: 71px;
desde el elemento principal, cada imagen se representará como una relación de aspecto: 4: 3
Enlace útil:
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
*{box-sizing: border-box;} body{ margin: 0; padding: 0; } ul { height: 100%; list-style: none; display: flex; padding: 0; margin: 0; } li { width: 10%; display: flex; list-style: none; justify-content: center; aspect-ratio: 4 / 3; } img { width: 100%; height: 100%; display: block; margin: 0; object-fit: cover; }
<div style="width:100vw; height: 71px; border:1px solid red;"> <ul> <li> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" /> </li> </ul> </div> <br> If you remove `height: 71px;` from parent element then each image will render as aspect-ratio: 4:3 <div style="width:100vw; border:1px solid red;"> <ul> <li> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" /> </li> </ul> </div>
Aquí he eliminado height: 71px;
del elemento principal y agregue un div encima de la imagen.
y aquí he usado padding-top: 75%
(4:3) en lugar de la propiedad de relación de aspecto.
*{box-sizing: border-box;} body{ margin: 0; padding: 0; } ul { height: 100%; list-style: none; display: flex; padding: 0; margin: 0; } li { width: 10%; display: flex; list-style: none; justify-content: center; } img { width: 100%; height: 100%; display: block; margin: 0; object-fit: cover; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .aspect-ratio-4by3 { position: relative; padding-top: 75%; width: 100%; }
<div style="width:100vw; border:1px solid red;"> <ul> <li> <div class="aspect-ratio-4by3"> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" /> </div> </li> <li> <div class="aspect-ratio-4by3"> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" /> </div> </li> <li> <div class="aspect-ratio-4by3"> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" /> </div> </li> <li> <div class="aspect-ratio-4by3"> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" /> </div> </li> <li> <div class="aspect-ratio-4by3"> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" /> </div> </li> <li> <div class="aspect-ratio-4by3"> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" /> </div> </li> <li> <div class="aspect-ratio-4by3"> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" /> </div> </li> <li> <div class="aspect-ratio-4by3"> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" /> </div> </li> <li> <div class="aspect-ratio-4by3"> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" /> </div> </li> <li> <div class="aspect-ratio-4by3"> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" /> </div> </li> </ul> </div>
Si su altura se fija en 71px
, entonces el ancho debe ser de 95px
para mantener la relación de aspecto 4:3.
Necesitamos corregir el tamaño de los padres, li
, a 95 x 71 px y estirar las imágenes para que quepan en él:
<!DOCTYPE html> <html> <head> <style> #container { width: 100vw; height: 71px; border: 1px solid red; } ul { height: 100%; list-style: none; display: flex; padding: 0; margin: 0; } li { width: 95px; /* fix the width */ display: flex; list-style: none; justify-content: space-evenly; } img { aspect-ratio: 4/3; object-fit: fill; /* fit the content in 95 x 71 box */ } </style> </head> <body> <div id="container"> <ul> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/CSS/object-fit/mdn_logo_only_color.png" /> </li> <li> <img src="https://interactive-examples.mdn.mozilla.net/media/examples/plumeria.jpg" /> </li> <li> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" /> </li> </ul> </div> </body> </html>
Si coloca cualquier imagen en él, se estirará para caber en el cuadro de 95x71px. Entonces, para cualquier imagen, el navegador mostrará una relación de aspecto de 95:71, que es ~ 4:3.
Contenido espaciado uniformemente:
<!DOCTYPE html> <html> <head> <style> #container { width: 100vw; height: 71px; border: 1px solid red; } ul { height: 100%; list-style: none; display: flex; padding: 0; margin: 0; justify-content: space-evenly; } li { width: 95px; /* fix the width */ display: flex; list-style: none; justify-content: center; } img { aspect-ratio: 4/3; object-fit: fill; /* fit the content in 95 x 71 box */ } </style> </head> <body> <div id="container"> <ul> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/CSS/object-fit/mdn_logo_only_color.png" /> </li> <li> <img src="https://interactive-examples.mdn.mozilla.net/media/examples/plumeria.jpg" /> </li> <li> <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" /> </li> </ul> </div> </body> </html>
Puede hacerlo utilizando la propiedad aspect-ratio
la propiedad background-image
.
aspect-ratio
ul { width: 100%; list-style: none; display: flex; align-items: center; padding: 0; margin: 0; } li { width: 10%; display: flex; list-style: none; justify-content: center; } img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
<div style="border:1px solid red;"> <ul> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/> </li> </ul> </div>
2. background-image
ul { width: 100%; list-style: none; display: flex; align-items: flex-start; padding: 0; margin: 0; } li { width: 10%; padding-top: 7.5%; background-image: url('https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png'); background-size: cover; background-position: center center; background-repeat: no-repeat; }
<div style="border:1px solid red;"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
Este es el segundo resultado de la ejecución del código.
Como puede ver, el width
de la imagen es 61.5px y la height
es 46.125px .
La relación de aspecto es 4:3 .
Puede usar la propiedad de grid
para ul
, la relación de aspect-ratio
para li
y la propiedad de object-fit
para img
:
body, html { width: 100%; height: 100%; } body { margin: 0; } * { box-sizing: border-box; } .root { width: 100%; border: 1px solid red; } ul { display: grid; grid-template-columns: repeat(10, 1fr); padding: 8px; margin: 0; } li { list-style-type: none; aspect-ratio: 4 / 3; display: flex; align-items: center; border: 1px solid green; } img { object-fit: cover; height: 100%; width: 100%; }
<div class="root"> <ul> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" /> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" /> </li> </ul> </div> <h3 style="margin-top: 24px; margin-bottom: 0;">if you just set width: 100% for image</h3> <div class="root"> <ul> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" style="height: unset" /> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" style="height: unset" /> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" style="height: unset" /> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" style="height: unset" /> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" style="height: unset" /> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" style="height: unset" /> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" style="height: unset" /> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" style="height: unset" /> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" style="height: unset" /> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" style="height: unset" /> </li> </ul> </div>
ul { height: 100%; list-style: none; display: flex; padding: 0; margin: 0; } li { height: 100%; display: flex; list-style: none; justify-content: center; } img { width: 100%; height: 100%; }
<div style="width:100vw;height:71px;border:1px solid red;"> <ul> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/> </li> </ul> </div>
jgofdg