Controlar el tamaño de una imagen dentro de un diseño de cuadrícula CSS

Solución:

Tienes dos problemas diferentes aquí.

Me referiré al primero, que es contener la imagen en su contenedor. Casi lo tienes.

Tu codigo:

.photo > img {
  object-fit: cover;
  width: 100%;
}

Solo necesitaba especificar una altura máxima en la imagen para que no pudiera desbordar el contenedor:

.photo > img {
  object-fit: cover;
  width: 100%;
  max-height: 100%;
}

Demostración de JSFiddle

---

El segundo problema, que es escalar el tamaño del contenedor de la imagen y arrastrar los elementos de la cuadrícula a continuación cuando la imagen se hace más pequeña, es significativamente más complejo.

Este no es un problema relacionado con la imagen. De hecho, puede eliminar la imagen por completo cuando intente resolver este problema.

Se trata de una cuestión de dimensionar dinámicamente un elemento de la cuadrícula (el contenedor de imágenes). ¿Por qué este elemento de cuadrícula cambiaría de tamaño en relación con el tamaño de la imagen, cuando su tamaño está siendo controlado por grid-template-columns y grid-template-rows?

Además, ¿por qué la fila inferior de elementos de la cuadrícula (tag, album, rotate) sigue el contenedor de imágenes hacia arriba o hacia abajo? Tendrían que salir de su fila.

Escalar todo el contenedor de la cuadrícula no sería un problema. Pero parece que solo desea escalar un elemento de la cuadrícula (el contenedor de imágenes). Es complicado. Probablemente esté buscando contenedores adicionales, auto valores para longitudes y posiblemente secuencias de comandos.

Esto es lo que sucede si le das a las filas de la imagen un auto valor: demostración de JSFiddle

¿Y si usa un imagen de fondo dentro de una de las celdas de la cuadrícula en lugar de una etiqueta IMG (aún no he usado display: grid b / c es tan nuevo – ¡genial!)

Luego usando tamaño de fondo y posición de fondo, puede dimensionarlo correctamente dentro de esa celda.

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 40vh 30vh 30vh;
  grid-gap: 10px;
  grid-template-areas: "info    photo photo photo   photo" "comment photo photo photo   photo" "comment tag     tag   album rotate"
}

.photo {
  grid-area: photo;
  background: yellow;
  height: 100%;
  background-size: cover; /* <-- background size */
  background-position: center; /* <-- background position */
}

.info {
  grid-area: info;
  background: pink;
}

.tag {
  grid-area: tag;
  background: teal;
}

.comment {
  grid-area: comment;
  background: green;
}

.album {
  grid-area: album;
  background: red;
}

.rotate {
  grid-area: rotate;
  background: blue;
}

<div class="container">
  <div class="photo" style="background-image: url('https://thumbs.web.sapo.io/?epic=YmIzAEUIMb3pue+Zz8qV8QS/WuKmq0vrL/lWiluSn7SstKeeh7/UTTBAuDlhHFD6YC9+vaCHBQuNOXeVaHkjzTSE8tF3hMBev6512ha92Yc4kRw=&W=1200&H=627&crop=center&delay_optim=1')">
  </div>
  <div class="info">info</div>
  <div class="tag">tag</div>
  <div class="comment">comment</div>
  <div class="album">album</div>
  <div class="rotate">rotate</div>
</div>

---

---

Utiliza Nuestro Buscador