横幅图片无法响应移动设备

Question

Original look of the website on mobile

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

div.masthead-banner.data-bg {

background-size: contain !important;

}

我明白了，在移动网站上会出现一个完整的横幅，上面和下面有很多灰色空间：

After css fix is applied

但是，我希望图像完全填满div，有没有办法实现这个目标？谢谢。

网站为http://naturessecrets.club

Answer 1

最好减少横幅的高度，并在其上设置.site-title a { font-size: 40px; } div.masthead-banner.data-bg { background-size: cover !important; } 。

npm install -g serve

Here is it

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