无法使影像适合影像库中的父div大小-编程知识-白鹭情

我正在尝试使用 CSS Grid创建回应式图片库 ( JSFiddle )，但是当我将影像添加到网格元素时，影像不会填满它们的整个大小。我不关心纵横比，我只希望影像完全适合父 div，而父 div 的大小保持不变（平方）。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100vh;
    width: 100vw;
}

.view-container {
    padding: 20px;
    width: 70%;
    margin: auto;
    border: solid red;
    display: flex;
    justify-content: center;
}

.view-grid {
    flex: 1 1 auto;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    list-style: none;
}

.grid-el-container {
    width: min(300px, 100%);
    padding-bottom: min(300px, 100%);
    background: blue;
    border: solid;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

.grid-el-content {
    position: absolute;
    background: lightblue;
    overflow: hidden;
}

.grid-el-bg {
    max-height: 100%;
    max-width: 100%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>CSS Grid</title>
</head>
<body>
<div class="view-container">
    <div class="view-grid">
        <div class="grid-el-container">
            <div class="grid-el-content">
                <img src="https://cdn.pixabay.com/photo/2014/12/28/13/20/wordpress-581849_960_720.jpg" alt="villa" class="grid-el-bg">
            </div>
        </div>
        <div class="grid-el-container"><div class="grid-el-content">Box 2</div></div>
        <div class="grid-el-container"><div class="grid-el-content">Box 3</div></div>
        <div class="grid-el-container"><div class="grid-el-content">Box 4</div></div>
        <div class="grid-el-container"><div class="grid-el-content">Box 5</div></div>
    </div>
</div>
</body>
</html>

uj5u.com热心网友回复：

这里有两个主要问题。第一个是包含元素的 div 没有占据它的整个父元素，所以影像已经是 100% 的高度和宽度。第二个是你只设定影像的最大高度和宽度，而不是实际的高度和宽度。

让我们首先解决家长。这可以通过将width: 100%;和添加height: 100%;到父 div来解决。如果你只希望 div 有 100% 的高度和宽度，如果它里面有一个影像，你可能需要撰写一些 JavaScript 来处理它。

现在让我们进入实际影像。实际上，这是在此处（width: 100%和height: 100%）添加完全相同的内容的问题。仅此一项就可以解决您的问题，但我还想补充一件事。我知道你说过你不关心纵横比，但是，如果你宁愿影像被切断而不是扭曲，你也可以object-fit: cover;在这里使用。

这是一个带有修改后的 CSS 的 JSFiddle

更改后完成的 CSS：

.grid-el-content {
    position: absolute;
    background: lightblue;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.grid-el-bg {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}