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
有没有办法,或者我应该为响应制作不同的图像大小?

最佳答案

要拉伸(stretch)背景,请使用 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/

相关文章:

CSS 具有已知子宽度的两列

jquery - 结合 animate.css 与 jquery slider 问题

javascript - 动态关闭 &lt;input&gt; 的自动填充菜单

html - Bootstrap 崩溃数据父项不起作用

jquery - 悬停的 CSS 仅适用于 jQuery 的奇数行

html - 如何添加两个背景图像 - 从中​​心列的左侧和右侧

javascript - 从 HTML JavaScript 更改 js 中的变量值?

javascript - 为什么在此 html 代码中将 "javascript:"添加到 onchange 之前?

html - 使用带有按钮的 ng-switch

ios - iphone 的 css3 大小转换