CSS实现宽高成比例缩放

时间:2021-03-22 18:05:22

用js实现一个宽度自适应,高度随着宽度变化而变化的矩形,相信大家肯定都会。无非是js获取一下元素宽度,然后再计算出相应比例的高度,然后赋给元素,但如果要求只用CSS实现呢。

 
      html代码如下,
 
<div class='container'>
    <div class='dummy'></div>
    <div class='content'>content</div>
</div>
     css代码如下,
 
复制代码
.container{
   
    width:100%;
    position:relative;
    display: inline-block;
}
.dummy{
    margin-top: 100%;
}
.content{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom: 0;
}
 
 
    接下来分析一下,究竟是如何实现的。首先容器container块内包含了两个div,一个是dummy,这个纯粹是为了实现缩放效果加的,另一个content里面放的是我们真正想要展现的内容。其实原理也很简单,大家都知道div是块元素,它默认就是占一行,宽度本来就是自适应的,所以我们需要做的是让它的高度能随宽度改变。在不使用js的前提下,靠的就是前面提到的dummy那个块来实现,dummy只设置了一个css属性,margin-top:100%,相信大家都反应过来了。因为容器宽度已经在那儿了,通过dummy块的margin-top来把整个的高度撑得和宽度一样,当容器宽度改变时,dummy的位置也会改变,进而容器高度就跟着发生了变化。
 
    但是,还是会有个问题——外部容器发生了高度塌陷。而”高度塌陷“这个词大家肯定都不是第一次听到,大家肯定都处理过因为子元素浮动导致父元素高度塌陷,所以这里采用的方法也是类似清除浮动的方法,设置父元素display:inline-block或overflow:hidden。这里说个题外话,不知道大家在使用这两种方法清除浮动的时候有没有过疑问,为什么给父元素这样设置之后就能把父元素高度撑起来呢,准确的原理解释起来有点复杂。可以简单的理解为,当子元素脱离文档流时,父元素不知道子元素的存在,所以导致高度塌陷。当设置父元素为display:inline-block或者overflow:hidden时,迫使父元素去检查自己内部有哪些子元素,而这时候就发现了之前absolute定位的子元素,所以高度就撑开了。
 
    这里给dummy块设置margin-top:100%,出来的是个可自适应缩放的正方形,如果需要长方形只需要更改此值即可,比如需要4:3的长方形,则应设为margin-top:75%。