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

最新推荐文章于 2024-03-13 17:05:22 发布

catchRun

最新推荐文章于 2024-03-13 17:05:22 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： css 其他

本文链接：https://blog.youkuaiyun.com/catchRun/article/details/106554773

前端专栏收录该内容

3 篇文章

订阅专栏

本文探讨了四种方法来实现图片高度自动设置为宽度的一半，包括使用padding-bottom、calc、vmin单位以及插入base64编码的图片。每种方法的原理、优缺点以及CSS兼容性问题进行了详细解释。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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