所以我使用网格布局来显示4张图片。问题是我无法将第二行的图片放到相同的高度:
我的HTML是:
<section id="gallery">
<h2>Gallery</h2>
<div id="img-container">
<img src="img/business1.jpg" alt="">
<img src="img/business2.jpg" alt="">
<img src="img/business4.jpg" alt="">
<img src="img/business5.jpg" alt="">
</div>
</section>
和我的CSS:
#gallery #img-container {
padding:20px;
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr 1fr;
}
#gallery img {
width: 100%;
object-fit: cover;
}
#gallery #img-container img:first-child {
grid-column: 1 / 4;
}
我得到它,使用max-content
(因此高度是三个图像的最大值)用于拇指行高度和align-self: stretch
用于图像,因此它们不尊重纵横比:
#gallery #img-container {
padding:20px;
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto max-content;
}
#gallery img {
width: 100%;
object-fit: cover;
align-self: stretch;
}
为第3和第4张图片添加'height =“100%”':
<section id="gallery">
<h2>Gallery</h2>
<div id="img-container">
<img src="img/business1.jpg" alt="">
<img src="img/business2.jpg" alt="">
<img src="img/business4.jpg" alt="" height="100%">
<img src="img/business5.jpg" alt="" height="100%">
</div>
</section>