时间戳

首页 > 解决方案 > div 的背景图像不会正确调整大小

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

问题描述

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

这是网站

即使我做了我应该做的一切，滑块后的第一张图片也不会正确调整大小。我将它设置为封面，以便它可以正确拉伸，但即使在那之后我也遇到了问题。我尝试过使用不同分辨率的图片，最后将其设置为 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>

标签： csswordpressmedia-queries

解决方案

添加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>

推荐阅读