CSS中如何保持容器宽高比不变的原理

html-css012

CSS中如何保持容器宽高比不变的原理,第1张

padding-top 和 padding-bottom 属性分别表示容器的上内边距与下内边距。

虽然设置的是垂直方向的高度，有意思的是当该值为一个百分比的时候表示的是和本身包含的元素的宽度有关。

换句话就是说， padding-top 和 padding-bottom 的值为百分比时，其实表示的是其元素宽度的百分比。

因此，在容器宽度不确定的情况下(如: 80% , flex: 1 等），保持容器宽高比不变，可以通过设置元素的 padding-top 或 padding-bottom 值。

例如，保持宽高比为16:9：

这个在保持图片的宽高比时非常有用。

在写css的时候最常用的长度单位是px(像素)，经常看到的还有em，pt等等，其实css中的长度单位一共有8个，分别是px，em，pt，ex，pc，in，mm，cm。1、px：像素(Pixel),相对于设备的长度单位，像素是相对于显示器屏幕分辨率而言的。譬如，WONDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。2、em：相对长度单位。相对于当前对象内文本的字体尺寸。如当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。3、pt：点(Point)，绝对长度单位。4、ex：相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。5、pc：派卡(Pica)，绝对长度单位。相当于我国新四号铅字的尺寸。6、in：英寸(Inch)，绝对长度单位。7、mm：毫米(Millimeter)，绝对长度单位。8、cm：厘米(Centimeter)，绝对长度单位。其中：1in = 2.54cm = 25.4 mm = 72pt = 6pc 容器的大小我们经常用px做单位字体大小(font-size)很多人用px做单位，其实用px做字体单位唯一的致命缺点就是在IE下无法用浏览器字体缩放的功能。但是，个人认为现在用px做字体单位在IE下无法用浏览器字体缩放的功能的缺点已经不再是那么重要了。因为新版本IE7，IE8都已经支持整个网页的缩放功能，包括火狐默认也是缩放整个网页，而不是缩放字体，没那么单纯的缩放字体大小还有什么重大的意义吗?按住Ctrl+滚动鼠标的中间的滚轮试试!IE进步了!

用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

}

有什么问题你可以去《5 1r gb》看看里面的论坛

接下来分析一下，究竟是如何实现的。首先容器container块内包含了两个div，一个是dummy，这个纯粹是为了实现缩放效果加的，另一个content里面放的是我们真正想要展现的内容。其实原理也很简单，大家都知道div是块元素，它默认就是占一行，宽度本来就是自适应的，所以我们需要做的是让它的高度能随宽度改变。在不使用js的前提下，靠的就是前面提到的dummy那个块来实现，dummy只设置了一个css属性，margin-top:100%，相信大家都反应过来了。因为容器宽度已经在那儿了，通过dummy块的margin-top来把整个的高度撑得和宽度一样，当容器宽度改变时，dummy的位置也会改变，进而容器高度就跟着发生了变化。-《http://v.youku.com/v_show/id_XMTMzMjg3MTU3Ng==.html?f=26081534》-

但是，还是会有个问题——外部容器发生了高度塌陷。而”高度塌陷“这个词大家肯定都不是第一次听到，大家肯定都处理过因为子元素浮动导致父元素高度塌陷，所以这里采用的方法也是类似清除浮动的方法，设置父元素display:inline-block或overflow:hidden。这里说个题外话，不知道大家在使用这两种方法清除浮动的时候有没有过疑问，为什么给父元素这样设置之后就能把父元素高度撑起来呢，准确的原理解释起来有点复杂。可以简单的理解为，当子元素脱离文档流时，父元素不知道子元素的存在，所以导致高度塌陷。当设置父元素为display:inline-block或者overflow:hidden时，迫使父元素去检查自己内部有哪些子元素，而这时候就发现了之前absolute定位的子元素，所以高度就撑开了。

这里给dummy块设置margin-top:100%，出来的是个可自适应缩放的正方形，如果需要长方形只需要更改此值即可，比如需要4:3的长方形，则应设为margin-top:75%。