开发者社区 问答 正文

width=100%;height=100%如何计算尺寸

<ul class="list-unstyled">
    <li>
        <a href="#">
            <img src="fp_pic_1600x700.jpg" style="width:100%;height:100%;display:block;">
        </a> 
    </li>
</ul>

请问下各位师傅,我上面代码img标签的width和height都为100%,那他们是根据哪一个元素那计算的? 是父元素a,是祖元素li,还是祖祖辈元素ul???

展开
收起
a123456678 2016-05-27 15:04:07 2460 分享 版权
1 条回答
写回答
取消 提交回答
  • 相对于父级具有块级样式(display:block)或者行内块级样式(diplay:inline-block)的元素

    在问题中的代码中,img要给自己设置宽度,会往父级寻找一个满足条件的元素,首先找到了a,但是a默认是行内元素,然后继续往上中,找到了块级元素li,止。

    如果给a转化为inline-block或者block元素,那么img将会根据a来设置宽高。这里写了一个简单的DEMO,大家可以感受感受:

    2019-07-17 19:17:56
    赞同 展开评论
问答地址: