無法使影像適合影像庫中的父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;
}

uj5u.com熱心網友回復：

試試這個：

.grid-el-bg {
  object-fit: cover;
}

從這個類中洗掉min-width和min-height。

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/397285.html

標籤：html css

上一篇：樣式表CSS的問題

下一篇：在多個iframe上方對齊多個標題