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

需求：

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

.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%;
}

 

参考：

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