橫幅圖片在移動設備上無響應

Question

網站在手機上的原始外觀

現在，當我應用CSS代碼時；

div.masthead-banner.data-bg {

background-size: contain !important;

}

我明白了，在移動網站上，出現了完整的橫幅，上面和下面都有很多灰色空間：

應用CSS修復后

但是，我本來希望圖像完全填充div，有什么方法可以實現？ 謝謝。

網站是http://naturessecrets.club

Answer 1

最好減小橫幅的高度並設置background-size: cover橫幅。

.site-title a {
  font-size: 40px;
} 
div.masthead-banner.data-bg {
    background-size: cover !important;
}

就這個

Answer 2

您可以將背景尺寸設置為100％，但這會拉伸您的照片。

我會為不同的設備使用不同的尺寸。 像這樣：

body {
background-image: url('img_test.jpg'); }

@media only screen and (min-width: 400px) {
body { 
    background-image: url('img_test.jpg');}}

Answer 3

您可以使用此CSS

 @media only screen and (min-width: 479px) { div.masthead-banner.data-bg { background-size: cover; height: 240px; display: flex; align-items: center; } }