如何調整圖像大小並適合CSS中的容器（div）

Question

我在寬度和高度（800x1200 600x800）上有不同大小的背景圖片。 我想將圖像調整為完整大小而不變形以適合div。 誰能告訴我如何在CSS中實現這一點。 我已經嘗試過以下方法，但是它沒有占據整個div寬度。 有人可以告訴我該怎么做嗎？

.example1 {
    border: 2px solid black;
    padding: 0;
    background: url(mountain.jpg);
    background-repeat: no-repeat;
    background-size: contain;
}

Answer 1

background-size: contain; 將始終顯示整個圖像（不剪切任何內容），從而在垂直或水平方向留出一些空間。

另一方面， background-size: cover; 會以一種方式填充整個DIV，即圖像的短邊恰好對應於DIV的長度或高度（取決於DIV與圖像之間的比例關系），而較長的一面則在側面或側面被切掉頂部和底部。

如果您不希望圖像失真，那么可以使用這兩個選項。 如果圖像變形不會干擾您，則可以設置background-size: 100% 100%;

Answer 2

嘗試下面的代碼並檢查

 .example1 {
    border: 2px solid black;
    padding: 0;
    background: url(mountain.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

Answer 3

嗨，我知道在不影響圖像質量的前提下最好的方法。

請給出position:relative; 到您必須對其進行backgorund的div。

並將所需的圖像放入div並賦予圖像position:absolute; height:100%; width:100%;top:0; left:0; boject-fit:cover; position:absolute; height:100%; width:100%;top:0; left:0; boject-fit:cover; 最后給您的圖片z-index:-1; 我希望它能起作用。