图片宽高未知，如何将高设置为宽的一半

此问题，你的业务中可能不涉及到，但面试官可能会考你的，所以还是得好好了解下这基本css功。

 

给如下代码，思考一分钟，你觉得应该怎么设置，有哪几种方法？

// html 片段
<div class="father">
    <div class="son"></div>
</div>

 

---

                                                                                               一分钟分界线

---

第一种，利用padding-bottom实现

.father {
    width: 100%;
    height: 600px;
}
.son {
    width: 100%;
    height: 0;
    padding-bottom: 50%;
}

原理：子元素的width:100%，padding-bottom：50%，都是相对于最近的父元素的，padding-bottom设置为父元素的一半，那么剩余的子元素为自适应

好处：不需要考虑兼容性

第二种，利用calc

.son {
    width:100%;
    height:calc(50%);
}</