Question

0

357

Views

Có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!!

over 3 years ago · Santiago Trujillo

7 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-03-03T18:33:18.632Z

 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%

Answer 2 · 2022-03-03T18:33:18.958Z

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>

Answer 3 · 2022-03-03T18:33:19.267Z

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>

Answer 4 · 2022-03-03T18:33:19.593Z

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>

Answer 5 · 2022-03-03T18:33:19.930Z

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 .

Answer 6 · 2022-03-03T18:33:20.289Z

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>

Answer 7 · 2022-03-03T18:33:20.595Z

 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

0

357

Cómo colocar 10 imágenes en una fila de pantalla completa para cualquier resolución manteniendo una relación de aspecto de 4:3

7 answers

0

0

0

0

0

0

0

Find remote jobs

Andres GPT