用CSS实现高度宽度固定比例,宽度不固定
2014-11-06 21:21
295 查看
今天学到一个很不错的CSS技巧:Zihua Li
一个两列比例布局,比如左边栏80%,右边栏20%,所以右边栏的width是不知道的,但是无论右边栏的width是多少,都要求height和width保持1:1的比例。不需要js,用纯css也可以实现这个效果
原理主要是2点:
1、当设置padding为百分比的时候,参照是父元素的width,这点和设置子元素的width行为是一致的。比如这个DOM:
计算出son的width和padding-bottom都是相对于parent的20%,即都是20px,这样就可以实现高宽比的任意比例
2、overflow的计算是包括了content和padding,所以只要padding够大,即使content是0,内容一样可以显示出来
所以,结合以上2点,就可以用纯CSS实现高度宽度固定比例的效果:
一个两列比例布局,比如左边栏80%,右边栏20%,所以右边栏的width是不知道的,但是无论右边栏的width是多少,都要求height和width保持1:1的比例。不需要js,用纯css也可以实现这个效果
原理主要是2点:
1、当设置padding为百分比的时候,参照是父元素的width,这点和设置子元素的width行为是一致的。比如这个DOM:
<div style="width: 100px"> <div id="son">abc</div> </div>
#son { width: 20%; padding-bottom: 20%; }
计算出son的width和padding-bottom都是相对于parent的20%,即都是20px,这样就可以实现高宽比的任意比例
2、overflow的计算是包括了content和padding,所以只要padding够大,即使content是0,内容一样可以显示出来
所以,结合以上2点,就可以用纯CSS实现高度宽度固定比例的效果:
div { width: 20%; padding-bottom: 20%; height: 0; }
相关文章推荐
- CSS实现不固定宽度和高度的自动居中
- 【转】纯 CSS 实现高度与宽度成比例的效果
- 网页图片变形解决方法-固定宽度高度按比例自动缩小CSS
- CSS实现自适应高度布局:头部底部固定,中间自适应铺满屏幕剩余高度,中间盒子里左盒子固定右盒子自适应宽度
- 纯 CSS 实现高度与宽度成比例的效果
- 纯css实现高度与宽度成给定比例的效果
- 纯css实现高度与宽度成比例的效果(转)
- CSS实现左右栏宽度固定中间栏宽度变化且各栏高度自适应背景色不同的三栏布局
- css实现高度或者宽度不固定的div元素垂直左右居中
- css实现高度height随宽度width变化保持比例不变
- (div+css)上下固定中间自适应高度网页布局的实现
- Android实现图片宽度100%ImageView宽度且高度按比例自动伸缩
- css实现右侧固定宽度,左侧宽度自适应
- css实现固定高度及未知高度文字垂直居中的完美解决方案
- imageview如何固定宽度(例如都是320),而高度随真实图片的比例来设定
- 【css】三栏,左右两栏固定,中间宽度自适应 ||| 三栏,高度自适应 有图片,高清,无码
- PHP 添加水印 & 比例缩略图 & 固定高度 & 固定宽度 类。
- css实现左栏固定右栏自适应,高度自适应的布局
- CSS控制页面最大最小宽度和高度可兼容IE6版本的实现方法
- CSS 控制固定高度和宽度