结一

2年前
  • 4855

    浏览
  • 8

    评论
  • 3

    收藏

css中如何做到容器按比例缩放

本文作者:imweb 结一 原文出处:imweb社区 未经同意,禁止转载

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

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

<img class="demo1" src="http://placehold.it/200x150" alt="">
<img class="demo2" src="http://placehold.it/400x300" alt="">

.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。鉴于移动端的屏幕大小不等,所以使用定宽不合适。

详细请参考容器等比缩放demo

8 条评论