所以我有一个带有背景图像的 div,背景大小设置为覆盖。
这是 div 代码:
.imgContainer {
width: 400px;
height: 340px;
z-index: 1;
border: 0;
background: url('https://dummyimage.com/800x680/ccc/333');
background-position: 50% 25%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
border-radius: .25rem;
}
@media screen and (max-width:650px) {
.imgContainer {
width: 100% !important;
}
}
<div class="imgContainer"></div>
背景完全显示图像,但由于我要让我的网站响应,我使用@media 规则更改宽度为 650px 的 div。
@media screen and (max-width:650px){
.imgContainer {
width: 100% !important;
}
}
当 div 被放大时,背景图像变宽并且不会显示图像的太多内容。当宽度为 400px,高度为 340px 时,图像的内容会完整显示。当 div 的宽度为 100% 并且图像的内容没有显示为 400px 宽时显示的那么多时,就会出现问题。如何解决这个问题?
提前致谢!
最佳答案
使用 background-size: cover
,您是在告诉浏览器确保图像覆盖整个元素,同时保持图像的原始纵横比。因此可以预料,更改 HTML 元素的纵横比会切断一些图像以实现此目的。
为了使您的图片具有响应性,您必须确保图片的纵横比保持不变。
执行此操作的一种方法是使用如下内容:
@media screen and (max-width:650px) {
.imgContainer {
width: 100%;
padding-bottom: 85%;
height: auto;
}
}
这会将填充设置为元素宽度的 85%,即 100/(400/340) = 85。假设您的 div
中没有其他内容,这将为其提供适当的外观图片的比例。
关于html - 如何阻止背景图像在调整大小时收缩,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54866274/