等比例缩放html5页面,css中如何做到容器按比例缩放

本文作者：IMWeb 结一

未经同意，禁止转载

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

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

.demo1{

width: 100px;/* 只设置宽度，根据等比例缩放得到高度为75px */

}

.demo2{

height: 150px; /* 只设置高度，根据等比例缩放得到宽度为200px */

}

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

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

核心思想为：提供一个容器，设置容器的高度为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。鉴于移动端的屏幕大小不等，所以使用定宽不合适。