css中如何做到容器按比例缩放【转】(自己看)

在说容易按比例缩放前,我们先说下图片按比例缩放。

对于图片,默认只设置图片的一个宽或高,那么另一个值就会按照图片真实比例缩放,如

.demo1{  width:100px;/* 只设置宽度,根据等比例缩放得到高度为75px */}.demo2{  height:150px;/* 只设置高度,根据等比例缩放得到宽度为200px */}

图片因为本身存在宽高比,所以设置一个值,另一个值自动也就根据真实的比例对应上,但是如果是视频呢?

一般在响应式中,我们会要求视频的宽高比为16:9或4:3,这么一来就比较头大了。当用户改变浏览器宽度的时候(改变高度不考虑),视频的宽度变了,那么高度也得根据我们要求的16:9或4:3改变。

这里老外提供了一个很巧的方案:Creating Intrinsic Ratios for Video

核心思想为:提供一个容器,设置容器的高度为0,再设置padding-bottom为56.25%(因为padding的百分比是按照容器宽度计算的,所以由padding来撑开容器高度,而不是height,保证了容器的宽高比例),最后设置视频绝对定位,其宽高为容器的100%

.wrap{height:0;padding-bottom:56.25%;/* 16:9 */position: relative;width:100%;}.wrap.video{position: absolute;left:0;top:0;width:100%;height:100%;}

根据上述思想,我们再将其扩展下,应用到其他地方,如:

这是一个移动端页面的一部分,要求全屏里面正好三张图片,左右图片宽度是相等的,第一个图片和第三个图片下面要对齐,图片之间的间距为10px。鉴于移动端的屏幕大小不等,所以使用定宽不合适。

你可能感兴趣的:(css中如何做到容器按比例缩放【转】(自己看))