保持高宽比

可保持宽高比的容器

CSS 规范指出，对于没有指定大小的可替代内容，最终的默认大小为 300px 宽或 150px 高

用目标元素的 原始高度/原始宽度，得出目标元素的宽高比。

此处的目标元素是 iframe

.object-wrapper {
    width: 100%;	// 宽度必须设置成100%，padding才能继承宽度
    height: 0;		// 高度必须为0，清除多余高度
    padding-bottom: 75%;	// 宽高比
    position: relative;
}
.object-wrapper iframe {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
   	// 以上操作是为了让iframe绝对居中于wrapper
}

将目标元素包裹起来，并设置包裹元素的高度清空，宽度设置成 100% ，底部内边距设置成宽高比（内边距百分比值基于元素的宽值），从而实现元素保持宽高比

16:9 尺寸

宽高比大约是：100 / 56，即padding-bottom的值要设置成 56%

保持高宽比

原文：https://www.cnblogs.com/CreateBox/p/15196021.html