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

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

　　

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

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

转载于:https://www.cnblogs.com/zhoujx1066/p/6645096.html