Ich habe ein CSS-Raster mit einer Reihe von Bereichen und einem Foto-Container.steuern die größe eines bildes in einem css grid
Ich weiß nicht, wie zu:
1) steuern, um die Größe des Fotos, so dass es im Bereich des Gitters enthalten ist, und
2) hält die Breite des Fotos bei 100% (also gleich seinem Behälter) und skalieren Sie die Höhe des Behälters auf das Foto. Im Grunde genommen dann das Fenster kleiner wird, wird die Breite des Bildes wird kleiner und damit auch die Höhe - Ziehen Sie den Tag, Album und drehen Elemente up ....
.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>
glaube ich nicht, was Sie versuchen können zu erreichen, mit einem Raster durchgeführt werden. – BrandonW