【计划方案一：padding完成】
基本原理：
一个原素的 padding，假如值是一个百分数，那这一百分数是相对性于其父原素的总宽来讲的，padding-bottom 也是这般。
应用 padding-bottom 来替代 height 来完成高宽比与总宽成占比的实际效果，将 padding-bottom设定为要想完成的 height 的值。同时将
其 height 设定为 0 令其原素的“高宽比”相当于 padding-bottom 的值，进而完成必须的实际效果。
<div class="father">
<div class="childbox"></div>
</div>
<style type="text/css">
.childbox{
padding-bottom: 20%;
width: 20%;
height: 0;
background: #888888;
}
</style>
上例宽高比为1比1，完成的是正正方形，而且依据父级小盒子总宽完成等比放缩
【计划方案二：一个掩藏的照片来完成】
基本原理:
div器皿假如不给定高宽比，它的高宽比会伴随着器皿內部的原素转变而撑大，这一情况下，大家在器皿內部加上一张合乎大家宽高占比的照片，给照片设定总宽100%；高宽比auto，大家了解照片只设定总宽得话，高宽比会随总宽来开展占比转变，全自动放缩，那样大家內部的子器皿的高宽比也便会依照占比放缩了。自然这一img你可以以占位性病变掩藏，还可以用其他小盒子遮盖上。
#container {
width: 100%;
}
.attr {
background-color: #008b57;
}
.attr img{
width: 100%;
height: auto;
}
</style>
<div id='container'>
<div class='attr'>
<img src="1.png" alt="">
</div>
</div>
这一方式不用考虑到一切适配性，PC移动极致运作。除开提升了一个dom构造，可是一个网页页面不计其数的编码来讲，不值得一提。
假如你感觉提升img标识多发性了http恳求，那麼base64照片编号能够处理这一难题，因为大家的的照片只必须一个样子罢了，所
以能够胆大的缩小，随后编号，连http恳求都省了。
【计划方案三：vw,vh】
css3的新企业(css3大法好~)，大家将父器皿的总宽和高宽比界定为同样的vw，那样父器皿的高宽比和总宽便是同样值，这一情况下，子器皿的宽高值设成百分数，无论父器皿尺寸怎样变，子器皿的高宽比和总宽比全是不容易变的
企业 表明
vw 相对性于视窗的总宽
vh 相对性于视窗的高宽比
vmin 相对性于视口的总宽或高宽比中较小的哪个被平均分为100企业的vmin
vmax 相对性于视口的总宽或高宽比中很大的哪个被平均分为100企业的vmax
<div class="father">
<div class="childbox"></div>
</div>
.childbox{
width: 20%;
height: 20vw;
background: #888888;
}
到此这篇有关css高宽比随总宽占比转变的几类完成方式的文章内容就详细介绍到这了,大量有关css高宽比随总宽转变內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！