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:
controla el tamaño de la foto, de modo que esté contenida dentro del área de la cuadrícula
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 vuelve más pequeño, y también lo hace la altura, tirando de la etiqueta, el álbum y girando 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;
}
<div class="container">
<div class="photo">
<img src="http://wallpaper-gallery.net/images/image/image-13.jpg" />
</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>