CSS实现宽高成比例缩放

最新推荐文章于 2023-08-06 17:03:05 发布

weixin_33850890

最新推荐文章于 2023-08-06 17:03:05 发布

阅读量296

点赞数

原文链接：http://www.cnblogs.com/duying/p/3916978.html

版权

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

html代码如下，

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

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;
}

效果http://jsfiddle.net/Doing93/9oLqyqha/

接下来分析一下，究竟是如何实现的。首先容器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%。

转载于:https://www.cnblogs.com/duying/p/3916978.html