Question

我一直在尝试使背景图片适合自适应视图，
但我得到的只是裁剪的图片。

.container_bg {
background-image:url("https://i.imgur.com/qjAvmjN.jpg");
height: 1635px; /*My Image height is 1635 px 
}

<div class="container_bg">
A
</div>

现在，当我从Chrome浏览器检查切换到“ iphone x”视图时，
仅显示左上部分，如何调整背景大小
按照响应模式。
我还使用了background-size:100% auto
它会缩小图像，并且我所有的内容都在DIV之外。
有没有办法，或者应该为响应做出不同的图像尺寸？

Answer 1

要延伸背景，请使用background-size延伸背景，这意味着您不需要height，而background-position将使图像居中屏幕。

.container_bg {
    height: 1635px;
    background-image:url("https://i.imgur.com/qjAvmjN.jpg");
    background-size: cover !important;
    background-position: top center !important;
}

<div class="container_bg">
A
</div>

无法将背景图片尺寸调整为响应视图

1 个答案: