0
347
VistasCómo colocar 10 imágenes en una fila de pantalla completa para cualquier resolución manteniendo una relación de aspecto de 4:3
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!!
·
Santiago Trujillo
7 Respuestas
Responde la pregunta0
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%
·
Santiago Trujillo
Denunciar
0
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>
·
Santiago Trujillo
Denunciar
0
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>
·
Santiago Trujillo
Denunciar
0
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>
·
Santiago Trujillo
Denunciar
0
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 .
·
Santiago Trujillo
Denunciar
0
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>
·
Santiago Trujillo
Denunciar
0
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
·
Santiago Trujillo
Denunciar
Responde la pregunta