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

标签 html css

我一直在尝试使我的背景图像适合响应式 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 .
有没有办法,或者我应该为响应制作不同的图像尺寸?

最佳答案

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

关于html - 无法将背景图像大小调整为响应式 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52712518/

相关文章:

html - 带有模糊 Angular 的html图像标签

php - PHP查询仅执行一次

JavaScript:拖放到 TextArea 上时,我的拖动图像消失

javascript - JavaScript div使用宽高比调整大小

jquery - 在手机下拉菜单上打开关闭特定Divs

jquery - 根据鼠标位置设置HTML字符串中各个字符的样式

css - Ionic 3 从 API/服务器加载 css

html - 图片到背景的渐变

asp.net - asp位置:带有CSS的超链接

javascript - 如何动态切换表单可见性?