根據父 div 裁剪背景圖像

Question

我有一個帶有左右邊距的父 div 和另一個帶有背景圖像但沒有邊距的 div。

我有背景尺寸作為封面，但顯示圖像的左右部分被切斷但仍然尊重邊距。

橙色是背景圖像 div 並具有數字 1 到 6，但灰色邊距部分覆蓋圖像並阻止 1 和 6，但我想將圖像縱橫填充到橙色部分中，尊重灰色邊距並將所有 1 到 6 安裝在橙色部分。

<div style="margin-left: 10vw; margin-right: 10vw;">
    <div class="image"></div>
</div>

.image {
    background-image: url("orange.jpg");
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100px;
}

編輯：新圖片上傳

Answer 1

好的，伙計。 答案很簡單。

將包含類image的div設為父級。 像這樣，圖像將從左到右全寬。

 * { margin: 0; } .image { background-image: url("https://picsum.photos/1920/108"); background-size: cover; background-position: center; width: 100%; height: 100px; } h1 { border: 2px solid red; }

 <div class="image"> <div style="margin-left: 10vw; margin-right: 10vw;"> <h1>Hi</h1> </div> </div>

或者保持原樣並刪除margin-left和margin-right

另一種選擇是執行以下操作。

 * { margin: 0 } .image { background-image: url("https://picsum.photos/1920/1080"); background-size: cover; background-position: center; width: 100%; height: 100px; } h1 { border: 2px solid red; }

 <div class="main-container"> <div class="image"> <div class="myContent" style="margin-left: 10vw; margin-right: 10vw;"> <h1>Hi</h1> </div> </div> </div>

如果這不能回答您的問題，請給我留言，我會盡力編輯答案以滿足您的要求並盡可能幫助您。

Answer 2

您只需要將cover更改為contain 。

您的代碼將變為：

<div style="margin-left: 10vw; margin-right: 10vw;">
    <div class="image"></div>
</div>

.image {
    background-image: url("orange.jpg");
    background-size: contain;
    background-position: center;
    width: 100%;
    height: 100px;
}

您的查看窗口的縱橫比導致圖像的高度拉伸到足以填充橙色框的高度，而保持縱橫比會將圖像的側面從橙色區域推入灰色區域。

如果你讓你的窗口不那么高，它看起來就像你想要的那樣，但你不想依賴於查看者的窗口縱橫比。

相反，使用“包含”將限制圖像大小，以便圖像適合橙色區域。