css背景图片全屏铺满自适应不拉伸
·
1. 踩过的坑:使用background-size: cover 背景图片放大到适合元素容器的尺寸,图片比例不变,但是超出容器的部分可能会裁掉,图片显示不完整
2. 解决方法:
使用background设置背景图,使用background-size: contain 自适应背景定位区域的最大大小,此时如果设置图片高度会导致电脑上正常,显示器上高度不能撑满、或设置高度无效导致图片显示不出来的问题,应该是分辨率兼容性有问题,需要通过设置padding-top百分比将图片高度挤出来,完美解决!
3. 代码示例:
<html>
<div class="footer-img"></div>
</html>
<style>
.footer-img {
max-width: 100%;
border: 2px solid red; // 设置边框方便padding-top调整图片高度
background: url('../assets/img/bottom-bg.png') no-repeat;
background-size: contain;
padding-top: 48%;
}
</style>
更多推荐
已为社区贡献1条内容
所有评论(0)