在网格布局中无法获得相同的图像高度

问题描述 投票:0回答:2

所以我使用网格布局来显示4张图片。问题是我无法将第二行的图片放到相同的高度:

enter image description here

我的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;
}
css grid frontend
2个回答
1
投票

我得到它,使用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;
}

https://codepen.io/anon/pen/mvNyJG


0
投票

为第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>
© www.soinside.com 2019 - 2024. All rights reserved.