Tengo un proyecto web estructurado con flexbox y con diseño responsive que cambia al redimensionar la página.
Trabajando en esto, me di cuenta que hay imágenes que se ven más largas que otras, haciendo así que quede irregular.
Así quedan las imágenes:
body {
font-family: Verdana;
background-image: url("");
width: 100%;
background-size: 100px 80px;
}
/* Redimensión */
* {
box-sizing: border-box;
}
#menu {
float:left;
width:100%;
text-align:center;
}
#menu a {
background-color: none;
padding:10px;
margin-top:0px;
display:block;
text-align: center;
width:100%;
color:white;
}
#portada {
float:left;
width:100%;
padding:0 20px;
}
#contenido {
background-color:none;
float:left;
width:100%;
padding:15px;
margin-top:7px;
text-align:center;
}
#contenido2 {
background-color:none;
float:left;
width:100%;
padding:15px;
margin-top:7px;
text-align:center;
}
/* Estructura flex */
.flex-container {
display: flex;
align-items: stretch;
background-color: none;
}
.flex-container > div {
background-color: none;
color: black;
width: 100px;
margin: 5px;
text-align: center;
line-height: 30px;
font-size: 15px;
}
/* Nav bar */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
/* Galería */
div.gallery {
border: 1px solid #ccc;
background-color: white;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 5px;
text-align: center;
font-size: 12px;
}
.responsive {
padding: 0 6px;
float: left;
width: 31%;
}
@media only screen and (max-width: 700px) {
.responsive {
width: 30%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
.receta {
font-size: 20px;
color: DarkSlateBlue;
background-color: FloralWhite;
}
.contenido {
background-color: FloralWhite;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="flex-container" id="portada">
<div style="flex-grow: 10">
<img src="https://image.freepik.com/vector-gratis/fondo-banner-gatos-lindos-dicen-hola_45130-353.jpg"
width="100%" height="200px;">
</div>
</div>
<!-- class="active" -->
<ul id="menu">
<li><a class="active" href="">Inicio</a></li>
<li><a href="">Hola</a></li>
<li><a href="">Hola</a></li>
<li><a href="">Hola</a></li>
</ul>
<div class="flex-container" id="contenido">
<div style="flex-grow: 1">
<p style="background-color: #ecdfff">
</p>
</div>
<div style="flex-grow: 9">
<div class="responsive">
<div class="gallery">
<a target="_blank" href="gato.jpg">
<img src="https://ichef.bbci.co.uk/news/410/cpsprodpb/8536/production/_103520143_gettyimages-908714708.jpg" alt="Gato1">
</a>
<div class="desc">Hola soy un gato</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="gato2.jpg">
<img src="https://www.hola.com/imagenes/estar-bien/20180831128704/ronroneo-gatos-causas/0-595-638/gato-ronroneo-1-t.jpg?filter=w600&filter=ds75" alt="Gato2">
</a>
<div class="desc">Hola soy otro gato</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="gato3.jpg">
<img src="https://www.promiau.com/static/img/img_blog/Thelazia_un_gusano_que_puede_parasitar_los_ojos_del_gato.jpeg" alt="Gato3">
</a>
<div class="desc">Y otro gato</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="gato3.jpg">
<img src="https://www.promiau.com/static/img/img_blog/Thelazia_un_gusano_que_puede_parasitar_los_ojos_del_gato.jpeg" alt="Gato3">
</a>
<div class="desc">Y otro gato</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="gato2.jpg">
<img src="https://www.hola.com/imagenes/estar-bien/20180831128704/ronroneo-gatos-causas/0-595-638/gato-ronroneo-1-t.jpg?filter=w600&filter=ds75" alt="Gato2">
</a>
<div class="desc">Hola soy otro gato</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="gato.jpg">
<img src="https://ichef.bbci.co.uk/news/410/cpsprodpb/8536/production/_103520143_gettyimages-908714708.jpg" alt="Gato1">
</a>
<div class="desc">Hola soy un gato</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</body>
</html>
Cuando redimensionas la pantalla a más grande o más pequeño, las imágenes se acoplan como tal.
Se puede apreciar que la longitud de las imágenes es distinta, aunque la defina en el estilo.
¿Cómo se cambia esto?
grid
, la otra es conflexbox
y otras soluciones un poco más antigua. Ahora mismo estoy redactando una respuesta sobre el tema..contenedor-imagen