横幅图片在移动设备上没有响应

Question

Original look of the website on mobile

现在，当我应用 css 代码时；

div.masthead-banner.data-bg {

background-size: contain !important;

}

我明白了，在移动网站上，完整的横幅显示在上面和下面有很多灰色 space：

After css fix is applied

但是，我希望图像完全填满 div，有什么办法可以实现吗？谢谢。

网站是 http://naturessecrets.club

Answer 1

您可以将背景大小设置为 100%，但这会拉伸您的照片。

我会为不同的设备使用不同的尺寸。就像这样：

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

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

Answer 2

最好降低横幅的高度并在上面制作 background-size: cover。

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

Here is it

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;
    }
}

横幅图片在移动设备上没有响应

Banner Image not Responsive on Mobile

css

wordpress

html

responsive-images