div與背景固定

Question

我想添加一個div到我的HTML與框圖像在它。但我不能讓圖片擴展到div的大小

這裏是我到目前爲止，

<div style="background:url('images/box.png') no-repeat center center fixed;width:600px;height:400px"> 
    test 
</div> 

這顯示寬度爲600像素，高400像素一個div，但它顯示的圖像的一半。但我需要讓圖像伸展。

感謝

Answer 1

如果你想要圖像拉伸，失去它的原始長寬比，請添加background-size: 100% 100%;。

另一方面，如果您希望圖像佔用整個div，同時保持圖像寬高比和一些裁剪沒問題，請使用background-size: cover

Answer 2

使用background-size: cover;或background-size: contain（選擇最適合您需要的正確屬性）

從MDN

蓋 該關鍵字指定背景圖像的規模應是儘可能小，同時確保其尺寸大於或等於背景定位的相應尺寸區域。

包含 該關鍵字指定的背景圖像應該被縮放，同時確保它的兩個尺寸小於或等於所述背景定位區域的相應的尺寸，以儘可能地大。