缩放屏幕保证图片不变形

502 阅读1分钟
<div class="transparency-logo">
    <img src="../images/about/transparency-logo.png" alt="">
</div>
.transparency-logo {
    position: absolute;
    right: 0;
    bottom: -40%;
    width: 32.29%;
    height: 0;
    padding-top: 37.5%;
  }

  .transparency-logo>img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }

使用了padding的百分比是相对于width的原理来实现。 因为使用了padding,所以需要用定位来实现,不然图片会被挤下去。

参考资料: www.zhangxinxu.com/wordpress/2…