宽度100%充满屏幕 矩形图片的布局小技巧

<div class="image-wrapper">
    <img src="image" alt="" />
</div>

  

.image-wrapper
  position:relative
  100%
  height:0
  padding-top:100%
   img
    position:absolute
    top:0
     left:0
     100%
     height:100%

  父盒子宽度100%自适应,利用padding-top或者bottom去自动撑开一个矩形区域,那么图片在父盒子中只要100%宽高就行了。

原文地址:https://www.cnblogs.com/zhoujx1066/p/6645096.html