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

Tengo un diseño de cuadrícula CSS con un montón de áreas y un contenedor de fotos.

No se como

  1. controlar el tamaño de la foto, para que esté contenida dentro del área de la cuadrícula

  2. mantenga el ancho de la foto al 100% (por lo tanto igual a su contenedor) y escale la altura del contenedor para que se ajuste a la foto. Básicamente, cuando la ventana se vuelve más pequeña, el ancho de la foto se hace más pequeño, y también lo hace la altura: arrastrando la etiqueta, el álbum y los elementos hacia arriba.

.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; } .photo>img { object-fit: cover; width: 100% } .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; } 
 
info
tag
comment
album
rotate

Tienes dos problemas diferentes aquí.

Abordaré la primera, 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 es más pequeña, es mucho más complejo.

Esto no es un problema relacionado con la imagen. De hecho, puedes eliminar la imagen por completo cuando intentas resolver este problema.

Este es un problema de dimensionar dinámicamente un elemento de cuadrícula (el contenedor de imágenes). ¿Por qué este elemento de cuadrícula cambiaría el tamaño en relación con el tamaño de la imagen, cuando su tamaño está siendo controlado por grid-template-columns 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.

La escalada de todo el contenedor de la red 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é viendo contenedores adicionales, valores auto para longitudes y posiblemente secuencias de comandos.

Esto es lo que sucede si le asigna a las filas de imágenes un valor auto : Demostración de JSFiddle

¿Qué pasa si usas una imagen de fondo dentro de una de las celdas de la cuadrícula en lugar de una etiqueta IMG (no he usado la visualización: la cuadrícula todavía es muy nueva, genial!)

Luego, utilizando el tamaño de fondo y la 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; } 
 
info
tag
comment
album
rotate

Probablemente necesite agregar ancho explícito: 100% a la imagen