(转)css实现盒子高度随宽度等比例缩放的四种方式

本文链接：https://blog.csdn.net/caseywei/article/details/123892374

本文介绍了四种CSS布局技巧：1)使用定位使内容绝对定位；2)CSS3的vw单位实现视口宽度单位布局；3)利用img标签的填充特性随屏幕缩放；4)通过padding百分比继承父元素宽度。

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

前提：先去下margin,padding,方便看效果

*{
    margin:0;
    padding:0
}

方法一：定位
css

.container {
    background-color: silver;
    width: 100%;
    position: relative;
    display: inline-block;
}

.dummy {
    margin-top: 100%;
}

.content {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

html

<div class='container'>
    <div class='dummy'></div>
    <div class='content'>content</div>
</div>

方式二：css3 vw
利用使用vw直接搞定

.container {
    background-color: silver;
    width: 100%;
}

方式三：img填充
利用img标签特性，放一张图片，让高度随着高度随着比例缩放（可以用base64弄张体积小的图）

.attr img{
    width: 100%;
    height: auto;
    dislplay:block;
}

html

<div class='attr'>
    <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2460827703,4239870726&fm=26&gp=0.jpg" alt="">
</div>

方式四：padding
利用padding属性使用百分比继承父元素宽度的特性
css

#container {
    width: 80%;
    height: 500px;
}
 
.attr {
    width: 50%;
    height: 0;
    padding-bottom: 50%;
    background-color: #008b57;
}

html

<div id='container'>
    <div class='attr'></div>
</div>

链接：https://blog.csdn.net/WangQing2508/article/details/110929152