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

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