Controlando o tamanho de uma imagem em um layout de Grade CSS
Eu tenho um layout de grade CSS com várias áreas e um contêiner de fotos.
Não sei como:
controlar o tamanho da foto, para que ela fique dentro da área da grade
mantenha a largura da foto em 100% (portanto, igual ao seu contêiner) e dimensione a altura do contêiner para caber na foto. Basicamente, quando a janela fica menor, a largura da foto fica menor, assim como a altura - puxando a tag, o álbum e girando os elementos para cima.
.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>