如何使背景圖像尺寸的高度始終等於全角圖像所需的圖像高度？

Question

如何使圖像始終具有相同的裁切高度。 就像本網站http://deliciousproductions.com.au/中的一樣，div高420px。 但是圖像進一步延伸。

這是div

<div class="dpsplash">
</div>

的CSS

.dpsplash {
    background-image: url('/img/banner1.png');  
    background-size: auto 800px;
    height: 400px;
    background-position: center top;
    background-repeat: no-repeat;
}

因此，這樣做是為了提高圖像高度，以便在水平調整頁面大小時，不會將裁剪圖像的點移動到div高度，而是會擴展寬度。 Buuuut我們遇到了一個問題，因為我必須猜測在較大分辨率下全寬繪圖的圖像高度，如果以全寬顯示，圖像的長度不會小於400px，因為如果在全寬顯示2500x1200圖像時，電話，它會在div之前結束，看起來很難看。

我覺得在math / javascript中應該是[（當前頁面寬度）/（圖像寬度）] *（圖像高度）=（需要的高度）或x，因此背景尺寸樣式應為background-size: auto (that formula from above?);

我基本上不知道Java語言，它是如此混亂，但是我理解邏輯參數。

Answer 1

你是說background-size: cover;嗎？ ？ 它的作用（ 來源 ）：

縮放背景圖像以使其盡可能大，以使背景區域完全被背景圖像覆蓋。 在背景定位區域內可能看不到背景圖像的某些部分

Answer 2

是的，我不確定您要問的是什么，您的評論對我來說還不是很清楚。

我要做的就是讓圖像在高分辨率的屏幕上看起來相似還是相同？ 例如，如果要測試您可以縮小瀏覽器，以估算出在更高dpi的屏幕上的外觀。 Chrome的devtool中還有一個移動模擬器，可以模擬更高的dpi。

對於您的問題，如果問題是如何保持寬高比以及如何將圖像的寬度保持在1080p之后的100％，則簡單的解決方案是添加一個媒體查詢，以強制寬度超過屏幕寬度100％ 1920像素。 看起來像width: 100%; 。 如果那看起來不太合適，您可以嘗試將超過100％的寬度設置為150％之類的值，這樣它將占用屏幕上與之前相同的大小。 如果這不是您的問題，並且您希望圖像以dpi縮放，請嘗試使用值vh和vw可以做到這一點。 它們代表視口的高度和寬度。 您還可以使用max-height/width和vmin/max設置最大寬度，高度，vw和vh