用js实现一个宽度自适应,高度随着宽度变化而变化的矩形,相信大家肯定都会。无非是js获取一下元素宽度,然后再计算出相应比例的高度,然后赋给元素,但如果要求只用CSS实现呢。
html代码如下,
content
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%。
让自定义view宽高成比例显示
有时候我们自定义一个View,比如ImageView,我们需要让它宽高按照一定的比例显示,例如在ImageView在GridView中显示,GridView设置了3列,由于ImageVIew的宽度会根 ...
创建一个宽高成比例的弹性div盒子
这里先提供一种,有更好的方法再补充. demo代码如下:
< ...
css 布局之定位 相对/绝对/成比例缩放
给body添加 overflow: hidden; 可以将页面所有的 滚动条隐藏,但必须要给body 设置一个高度 overflow: hidden; height:864px; 父元素必须要设置 p ...
CSS实现图片快速等比例缩放,效果佳
初学者在实现图片等比例缩放,通常会使用js编写逻辑来控制高或宽,达到自动缩放的效果. 这里提供一种纯CSS的图片缩放功能,请看代码: