Question

我正在尝试在网格布局的div中插入图片，并且我希望图片的高度始终与div的高度完全匹配。但是我不能使图像尊重其父div的边界。在大多数情况下，它与网格重叠，如果我使用了overflow：hidden，它只会裁剪图像。我希望它保持宽高比。

body {
    margin: 0;
}

.wrapper {
    display: grid;
    grid-template: repeat(2, 50vh) / repeat(3, 1fr);
}

.wrapper {
    background-color: #A9A9A9;
}

.wrapper > div:nth-child(even) {
    background-color: #D3D3D3;
}

.img_div {
    position:relative;
    display: inline-block;
    height: 100%;
    width: 100%
}

.img_div > img {
    position: absolute;
    width: auto;
    height: auto;
    margin: auto;
    min-height: 100%;
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="wrapper">
        <div class="pic1">Div1</div>
        <div class="pic2">Div2
            <div class="img_div">
                <img src="https://i.imgur.com/VHtXwib.jpg">
            </div>
        </div>
        <div class="pic3">Div3</div>
        <div class="pic4">Div4</div>
        <div class="pic5">Div5</div>
        <div class="pic6">Div6</div>
    </div>
</body>
</html>

Answer 1

可能不需要多余的子元素.img_div，但是为了保持相同的结构，我更新了CSS以使其为display: inline，并更改了.img_div > img的样式，删除了display: absolute;并将min-height: 100%;更改为max-height: 100%;，并同时添加了max-width: 100%;。

body {
    margin: 0;
}

.wrapper {
    display: grid;
    grid-template: repeat(2, 50vh) / repeat(3, 1fr);
}

.wrapper {
    background-color: #A9A9A9;
}

.wrapper > div:nth-child(even) {
    background-color: #D3D3D3;
}

.img_div {
    position:relative;
    display: inline;
    height: 100%;
    width: 100%
}

.img_div > img {
    width: auto;
    height: auto;
    margin: auto;
    max-height: 100%;
    max-width: 100%;
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="wrapper">
        <div class="pic1">Div1</div>
        <div class="pic2">Div2
            <div class="img_div">
                <img src="https://i.imgur.com/VHtXwib.jpg">
            </div>
        </div>
        <div class="pic3">Div3</div>
        <div class="pic4">Div4</div>
        <div class="pic5">Div5</div>
        <div class="pic6">Div6</div>
    </div>
</body>
</html>

如果愿意，您也可以将.img_div保留为display: inline-block，但需要删除其width: 100%; 另外，您可能需要根据使用情况调整垂直对齐方式。

Answer 2

我想我在这里找到了基于本文的解决方案。

https://www.whitebyte.info/programming/css/how-to-make-a-div-take-the-remaining-height

基本上将每个div设置为display：table，然后将每个容器作为该表行放在该div中。这将填补网格的其余高度

body {
    margin: 0;

}

.wrapper {
    display: grid;
    grid-template: repeat(2, 50vh) / repeat(3, 1fr);
}

.wrapper {
    background-color: #A9A9A9;
}

.wrapper > div {
    text-align: center;
    display: table;
    height: 100%;
}

.wrapper > div:nth-child(even) {
    background-color: #D3D3D3;
}

.img_div {
    display: table-row;
    height: 100%;
    width: 100%;
}

.img_div > img {
    height: 100%;
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="wrapper">
        <div class="pic1">Div1</div>
        <div class="pic2">Div2
            <div class="img_div">
                <img src="https://i.imgur.com/VHtXwib.jpg">
            </div>
        </div>
        <div class="pic3">Div3</div>
        <div class="pic4">Div4</div>
        <div class="pic5">Div5</div>
        <div class="pic6">Div6</div>
    </div>
</body>
</html>

如何用图像填充网格布局中的单元格？

2 个答案: