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>
574
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
