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

此问题，你的业务中可能不涉及到，但面试官可能会考你的，所以还是得好好了解下这基本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%);
}

原理：利用css新特性calc计算属性

缺点：css3新特性，需要考虑兼容性

第三种，使用vmin

.father{
    width: 100vmin;
    height: 100vmin;
}
.son {
    width: 100%;
    height:50%;
}

单位 说明
vw 相对于视窗的宽度
vh 相对于视窗的高度
vmin 相对于视口的宽度或高度中较小的那个被均分为100单位的vmin
vmax 相对于视口的宽度或高度中较大的那个被均分为100单位的vmax

缺点：css3新特性，需要考虑兼容性

第四种，加入一张符合要求的宽高比图片，图片可以使用base64转码

// html 片段
<div class="father">
    <div class="son">
        <image src="https://img-blog.csdnimg.cn/2022010621123030449.png"></image>
    </div>
</div>

.father{
    width: 100%;
    height:600px;
}
img {
    width: 100%;
    height: auto;
}

好处：不需要考虑兼容性

 

另外说明：padding、margin设置为百分比的时候，是相对于最近的父元素的

相对于父级宽度的：

max-width、min-width、width、left、right、text-indent、padding、margin、grid-template-columns、grid-auto-columns、column-gap 等；

 

相对于父级高度的：

max-height、min-height、height、top、bottom、grid-template-rows、grid-auto-rows、row-gap 等；

 

相对于主轴长度的：

flex-basis 等；

 

相对于继承字号的：

font-size 等；

 

相对于自身字号的：

line-height 等；

 

相对于自身宽高的：

border-radius、background-size、border-image-width、transform: translate()、transform-origin、zoom、clip-path 等；

 

相对于行高的：

vertical-align 等；