html - 无法将背景图像大小调整为响应式 View

Question

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

.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” View 时
只显示左上部分，如何调整背景大小
根据响应模式。
我还使用了 background-size:100% auto
它缩小了图像，我的所有内容都超出了 DIV。
有没有办法，或者我应该为响应制作不同的图像大小？

Answer 1

要拉伸(stretch)背景，请使用 background-size 来拉伸(stretch)它，这意味着您不需要 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>