Question

我正在处理我正在处理的网站问题，背景图片没有针对所有移动设备和平板电脑设备调整大小。

即使我完成了应该做的所有事情，滑块之后的第一张图像也无法正确调整大小。我将它设置为封面，以便它可以正常伸展，但即使在那之后我也有问题。我尝试了不同的图片分辨率，最后使它成为div背景，因为我使用WP我必须做它作为raw-html选项。

在CSS中它看起来像这样：

.vc_row.divbgImg.row-container {
    width: 100%;
    height: 450px;
    background-image: url(https://i.imgur.com/GlIGTxV.jpg);
    background-size: cover;
    background-repeat: no-repeat;   
}

<div class="vc_row divbgImg row-container"></div>

Answer 1

添加css：

background-position: center;

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

另外，请确保实际图片文件的尺寸接近于在网站上显示的尺寸，以获得最佳效果。

.vc_row.divbgImg.row-container {
    width: 350px;
    height: 450px;
    background-image: url('http://via.placeholder.com/350x150');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    
}

<div class="vc_row divbgImg row-container"></div>

div的背景图像不会正确调整大小

1 个答案: