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>

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐