HTML中保持DIV宽高比

在HTML中保持DIV的宽高比,可以做一张指定宽高比的图片,把它放到自动宽高的DIV里面,之后这个DIV就可以保持图片的宽高比,这种方法要做图,还浪费网络资源; 还有一种方法可以通过CSS实现,下面就来介绍如何通过CSS来保持DIV宽高比

以 4:3 为例, 想要DIV按照这个宽高比,在网页中随着横向的伸缩,在纵向上等比伸缩, 用一个外围DIV来包裹它,且将这个外围DIV称之为Wrapper, Wrapper 的CSS样式如下:

.wrapper {
  position : relative;
  padding-bottom : 75%;
}

这个Wrapper的宽高比就是 4:3 , 其中的奥妙就在于padding-bottom:75%, padding-bottom 是相对宽度的.也就是整个Wrapper的高度等于padding-bottom 的高度,Wrapper 没有内容高度.没有内容高度如何往其中放置我们准备的DIV呢?答案是 绝对定位, 所以Wrapper的样式中有position:relative, 方便子元素相对Wrapper的左顶点定位.

最后我们把想要保持宽高比的DIV放到Wrapper中去, 这个DIV且称之为Inner, 下面是这个Inner的CSS样式:

.inner {
  position : absolute;
  top : 0; left : 0; right : 0; bottom : 0;
}

结束.

转载于:https://my.oschina.net/u/1169894/blog/761037