<分区>
我的 Bootstrap 行有一个背景图片。当我调整(缩小)浏览器窗口时，图像会随之缩小。
我正在努力使图像保持居中并且不会缩小。因此，当我缩小浏览器时，图像应该保持在页面的中央，并且它的边缘基本上变得不可见。
我有以下 CSS:
.my-bootstrap-row {
background-image: url(foo.jpg);
background-position:fixed;
background-size: 100% 100%;
background-repeat: no-repeat;
height:700px; /* image height is also 700px */
}
和以下 HTML:
<div class="row my-bootstrap-row">
blah blah
</div>
我在这里错过了什么？
最佳答案
它缩小了只是因为你设置了 background-size: 100% 100%; 设置你的 background-size: cover; 你也可以这样做来寻找背景图片center background-image: url(foo.jpg) center 中心;
.my-bootstrap-row {
background-image: url(foo.jpg) center center no-repeat;
background-position:fixed;
background-size: cover;
background-repeat: no-repeat;
height:700px; /* image height is also 700px */
关于html - 如何防止我的背景图像缩小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45582322/
相关文章：
jquery-mobile - twitter-bootstrap 与 jquery-mobile
html - R 中是否有一种简单的方法可以仅提取 HTML 页面的文本元素？
jquery - 如何从 jQuery 'body' 单击事件中获取特定元素
javascript - 如何减少 JavaScript 触摸输入的触摸延迟？
html - `background-image` 无法在 `<body>` 上呈现
css - Bootstrap 4 Angular 7 响应式 chalice 布局
css - 将 div 应用为鼠标悬停淡入 100% 宽度标题的简单未膨胀方法