纯css实现宽高度等比例变化的四种方法

2020年03月03日 23:37:28益点益滴8916

网页前端布局中,我们经常需要元素宽度高度等比例协调变化,特别是响应式自适应网页,下面我们将分享4种解决方案。

方法1:使用一个隐藏的图片

这个方法不需要考虑任何兼容性,PC移动端完美运行。除了增加了一个dom结构,但是相对与一个页面成百上千的代码来说,不值一提

我们知道,div容器如果不给定高度,它的高度会随着容器内部的元素变化而撑大,这个时候,我们在容器内部添加一张符合我们宽高比例的图片,给图片设置宽度100%;高度auto。不管我们的父容器如何变化,内部的img宽度都是100%,图片是会严格按照比例i自动缩放的,相应的,我们内部的子容器的盖度也就会按照比例缩放了

#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>

如果你觉得增加img标签多发了http请求,也可以采用base64图片编码帮你解决这个问题,适合不太大的图片,这样可以省掉http请求。

方法2:使用vmin单位

这个单位也是css3的新单位(css3大法好~),我们将父容器的宽度和高度定义为相同的vmin,这样父容器的高度和宽度就是相同值,这个时候,子容器的宽高值设为百分比,不管父容器大小如何变,子容器的高度和宽度比都是不会变的。

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

 #container{  width: 100vmin;  height: 100vmin; }
   .attr {  width: 50%;  height: 50%;  background-color: orange;}

方法3:使用cale计算

cale()是css3的心特性,它的值可以是一个表达式,这里我们关心的是。calc中的百分比也是按照父容器的百分比垃圾算的

.attr{  width:50%;  height: calc(50%);}

方法4:padding-bottom边距实现

这里方法非常巧妙,由于padding-bottom的属性值百分比是按照父容器的宽度来计算的,所以这里我们设置容器宽度为父容器的50%;padding-bottom也为50%;就都是父容器宽度的50%;显示出来就是一个完美的正方形了

看个代码:

<style type="text/css">
#container {    width: 80%;    height: 500px;}
.attr {    width: 50%;    height: 0;    padding-bottom: 50%;    background-color: #008b57;}
</style>
<div id='container'>
   <div class='attr'></div>
</div>

超赞,真给力!嗯,必须鼓励~

打赏0
账号:mxy310@163.com[复制]
账号:77940140[复制]