自適應圖像背景尺寸封面

Question

我正在嘗試使用圖像作為背景作為封面。 但是圖像在不同的窗口大小中顯示不同。 我試圖在chrome上查看開發者工具。 在我的圖像上有曲線形狀，對於較大的屏幕和移動設備，它的外觀完全不同。

我想以相同的外觀顯示所有窗口大小的圖像。 這是我的CSS代碼。

background-image:url(../wp-content/uploads/2018/06/footer-wave-img.png);
background-repeat: no-repeat;
background-size: cover ;
height:auto;

請告訴我我該怎么辦。

Answer 1

對於我已經建立的幾個站點，這一直是我用於響應式大background-image

    img   {   
        height: auto; 
        width: 100%;
        background-image: url(../wp-content/uploads/2018/06/footer-wave-img.png);
        background-position: 0%, 0%, 50%, 50%;
        background-size: auto, cover;
     }

Answer 2

您可以將background-size屬性設置為"100% 100%" ，這將使背景與設備的分辨率無關。 但是，背景圖像將拉伸以覆蓋元素的整個內容區域。
這是一個小提琴 。
如果您希望保持圖像的比例不變，則可以嘗試設置background-size: 100%; 這也是。