1

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?

2
  • 1
    Hola Lucía. Hay varias formas interesantes de hacerlo. Una es utilizando cuadrículas grid, la otra es con flexbox y otras soluciones un poco más antigua. Ahora mismo estoy redactando una respuesta sobre el tema. Commented el 3 feb. 2020 a las 11:16
  • Edité mi respuesta para añadirle algunas media-queries e ir controlando la altura de .contenedor-imagen
    – phpMyGuel
    Commented el 3 feb. 2020 a las 12:00

2 respuestas 2

4

Para hacer lo que necesitas me temo que vas a tener que retocar las imágenes para ajustarlas a un tamaño unificado y que de este modo ni se te corten ni se re-dimensionen de manera inadecuada. No obstante un ejemplo de como puede quedar es el siguiente, solucionando el problema del texto con un 'white-space:pre' en el css del contendor que le da forma y colocando un 'height' fijo para que todas las miágenes ocupen el mismo espacio:

    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;
      margin-bottom: 15px;
    }

    div.gallery:hover {
      border: 1px solid #777;
    }

    div.gallery img {
      width: 100%;
      /*height: auto*/
      height:75px;
      min-height:50px;
    }

    div.desc {
      padding: 5px;
      text-align: center;
      font-size: 12px;
      white-space: pre;
    }

    .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>

Otra opción sería que definieras un tamaño fijo de contenedor para cada uno de los breakpoints que necesitas y pasarle la imagen como 'background' con un 'background-size:cover' o 'background-size:100%', que se centre y no se repita. Pero en cualquier caso lo ideal sería que las imágenes tengan el mismo tamaño si es que lo que necesitas es que ni se corten ni se distorsionen en ningún momento.

2
  • ¡Justo lo que buscaba! ¡Gracias!
    – Lucía
    Commented el 3 feb. 2020 a las 12:33
  • Un placer poder ayudar :)
    – JorgeGuz
    Commented el 3 feb. 2020 a las 12:34
2

Tienes varias opciones, pero la que considero que menos inconvenientes presenta es perder parte de las imágenes más altas en beneficio de conservar la proporción de las imágenes (para que no se deformen y queden feas).

Para ello he envuelto tus imágenes en un <div> contenedor al que he dado una altura fija en píxeles y un overflow: hidden. De esa manera, todo lo que sobrepase esa altura no será mostrado, pudiendo hacer que todas las imágenes tengan la misma altura.

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 .contenedor-imagen {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

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 (max-width: 1500px) {
  div.gallery .contenedor-imagen {
    height: 150px;
  }
}

@media (max-width: 1175px) {
  div.gallery .contenedor-imagen {
    height: 130px;
  }
}

@media (max-width: 1020px) {
  div.gallery .contenedor-imagen {
    height: 115px;
  }
}

@media (max-width: 930px) {
  div.gallery .contenedor-imagen {
    height: 100px;
  }
}

@media (max-width: 830px) {
  div.gallery .contenedor-imagen {
    height: 90px;
  }
}

@media (max-width: 765px) {
  div.gallery .contenedor-imagen {
    height: 80px;
  }
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 30%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
  
  div.gallery .contenedor-imagen {
    height: 175px;
  }
}

.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">
    <div class="contenedor-imagen">
		<img src="https://ichef.bbci.co.uk/news/410/cpsprodpb/8536/production/_103520143_gettyimages-908714708.jpg" alt="Gato1" width="300px" height="200px">
    </div>
		</a>
		<div class="desc">Hola soy un gato</div>
		</div>
	</div>
	
	<div class="responsive">
	<div class="gallery">
		<a target="_blank" href="gato2.jpg">
    <div class="contenedor-imagen">
		<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" width="300px" height="200px">
    </div>
		</a>
		<div class="desc">Hola soy otro gato</div>
	</div>
	</div>
	
	<div class="responsive">
	<div class="gallery">
		<a target="_blank" href="gato3.jpg">
    <div class="contenedor-imagen">
		<img src="https://www.promiau.com/static/img/img_blog/Thelazia_un_gusano_que_puede_parasitar_los_ojos_del_gato.jpeg" alt="Gato3" width="300px" height="200px">
    </div>
		</a>
		<div class="desc">Y otro gato</div>
	</div>
	</div>
	
	<div class="responsive">
	<div class="gallery">
		<a target="_blank" href="gato3.jpg">
    <div class="contenedor-imagen">
		<img src="https://www.promiau.com/static/img/img_blog/Thelazia_un_gusano_que_puede_parasitar_los_ojos_del_gato.jpeg" alt="Gato3" width="300px" height="200px">
    </div>
		</a>
		<div class="desc">Y otro gato</div>
	</div>
	</div>
	
	<div class="responsive">
	<div class="gallery">
		<a target="_blank" href="gato2.jpg">
    <div class="contenedor-imagen">
		<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" width="300px" height="200px">
    </div>
		</a>
		<div class="desc">Hola soy otro gato</div>
	</div>
	</div>
	
	<div class="responsive">
		<div class="gallery">
		<a target="_blank" href="gato.jpg">
    <div class="contenedor-imagen">
		<img src="https://ichef.bbci.co.uk/news/410/cpsprodpb/8536/production/_103520143_gettyimages-908714708.jpg" alt="Gato1" width="300px" height="200px">
    </div>
		</a>
		<div class="desc">Hola soy un gato</div>
		</div>
	</div>	
	
	<div class="clearfix"></div>
	</div>
</div>

</body>
</html>

2
  • Gracias por tu respuesta, pero al ejecutar el snippet el problema persiste
    – Lucía
    Commented el 3 feb. 2020 a las 11:23
  • No te entendí bien. La solución es para que se vean imágenes con la misma altura en escritorio. Para que te funcione en otros dispositivos deberías adaptar la altura del contenedor de la imagen a través de media-queries. Voy a adaptar el código para añadir un par de media-queries.
    – phpMyGuel
    Commented el 3 feb. 2020 a las 11:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.