Esta pregunta ya tiene respuestas aquí:
¿Por qué los elementos flexibles no superan el tamaño del contenido?
(7 respuestas)
Cerrado
hace 2 años
.
Usando solo CSS, ¿cómo puedo cambiar el tamaño de las imágenes por debajo de su ancho y alto originales cuando el div principal se vuelve más pequeño que la suma del ancho del contenido? Tengo un div con algunas imágenes y si cambio el tamaño de la ventana, digamos a continuación400px, las imágenes no cambian de tamaño por debajo de su tamaño original. ¿Hay alguna forma de que las imágenes del contenido se puedan cambiar automáticamente al cambiar el tamaño de la ventana del navegador? Adjunté el código recortado a continuación:
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
max-width: 900px;
max-height: 256px;
border: thin solid silver;
}
img {
height: 100%;
max-height: 256px;
width: auto;
}
body {
margin: 5px;
}
<body>
<div class="container">
<img src="https://img.icons8.com/pastel-glyph/2x/blood-sample.png" />
<img src="https://img.icons8.com/pastel-glyph/2x/blood-sample.png" />
<img src="https://img.icons8.com/pastel-glyph/2x/blood-sample.png" />
</div>
</body>
¿Por qué envías spam a publicaciones/preguntas?
- Manas Khandelwal
28 de marzo de 2021 a las 7:35
La última publicación recibió un error, la eliminé ypublicado el correcto.
- Marcin Kostrzewa
28 de marzo de 2021 a las 7:36
La última publicación recibió un error --- ¿error? 🙄
- Manas Khandelwal
28 de marzo de 2021 a las 7:38
ancho mínimo:0 a imágenes
Temani Afif
28 de marzo de 2021 a las 9:09
------------------------------------
Puedes usar unidades como vw, que significa ancho de ventana gráfica. Entonces digamos que configuramos el ancho de la imagen en 33.33vw, entonces la imagen será el 33.33% del tamaño de la pantalla.
body {
margin: 5px;
}
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
max-width: 900px;
max-height: 256px;
border: thin solid silver;
}
img {
height: 100%;
width: 33.33vw;
}
<div class="container">
<img src="https://img.icons8.com/pastel-glyph/2x/blood-sample.png" />
<img src="https://img.icons8.com/pastel-glyph/2x/blood-sample.png" />
<img src="https://img.icons8.com/pastel-glyph/2x/blood-sample.png" />
</div>
1
Acabo de encontrar una solución. Lo estoy publicando. Gracias por la ayuda y el consejo Manas.
- Marcin Kostrzewa
28 de marzo de 2021 a las 7:51
------------------------------------
-------------- ------------------
Encontré una solución. Simplemente coloque todas las imágenes en div y establezca el ancho de la imagen en 100%. Espero que pueda ser útil para alguien. Código recortado a continuación:
.container {
width: 100%;
display: flex;
justify-content: space-between;
max-width: 900px;
max-height: 256px;
border: thin solid silver;
}
img {
width: 100%;
}
body {
margin: 5px;
}
<body>
<div class="container">
<div><img src="https://img.icons8.com/pastel-glyph/2x/blood-sample.png" /></div>
<div><img src="https://img.icons8.com/pastel-glyph/2x/blood-sample.png" /></div>
<div><img src="https://img.icons8.com/pastel-glyph/2x/blood-sample.png" /></div>
</div>
</body>
Respondido
28 de marzo de 2021 a las 7:55 am
Marcin Kostrzewa
Marcin Kostrzewa
575
4
4 insignias de oro
11
11 insignias de plata
24
24 insignias de bronce
