码迷,mamicode.com
首页 > 其他好文 > 详细

图片预占dom位置,防止页面二次计算高度

时间:2017-09-09 18:15:59      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:宽度   元素   思想   color   code   span   logs   strong   原理   

html:

<div class="img">
    <img src="1.png" />
</div>

stylus:

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

原理:

就是相当于设置了img父元素的div宽、高都是100%,其中核心思想是高根据宽度来计算的

 

图片预占dom位置,防止页面二次计算高度

标签:宽度   元素   思想   color   code   span   logs   strong   原理   

原文地址:http://www.cnblogs.com/wenxiangxu/p/7498733.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!