根据父 div 的宽度调整视频大小时，有很多保持宽高比的解决方案。其中大多数依赖于“padding-top”和“padding-bottom”是根据宽度而不是高度计算的事实。
我正在尝试做类似的事情，但我想根据父 div 的高度调整视频大小。
为此，我需要创建一个无论高度如何都保持纵横比的 div。
这可能是一种蹩脚的方法，但我决定使用图像来执行此操作，因为我可以将具有适当宽高比的图像高度设置为 100%，并让高度自行解决。
我已经非常接近完成这项工作了。到目前为止，我已经能够使内部 div 完全按照我想要的方式执行，除了它不会在窗口大小调整时重绘。但是，如果我调整窗口大小然后重新加载，它就会起作用。有任何想法吗？
这是演示 http://codepen.io/coulbourne/full/Gtwje（这不是一个codepen问题，我也在本地完成了）
使用图像的好想法height: 100%。这肯定会使框的宽高比与图像相同，但无论出于何种原因，都不会在窗口调整大小时回流框。
这是一个稍微简洁的 CSS 和 Javascript hack 的演示，用于修复窗口调整大小时的回流。
- 全页演示 http://codepen.io/shshaw/full/uzlfh
- Code http://codepen.io/shshaw/pen/uzlfh
在演示中，我使用 16px x 9px 数据 uri 图像来设置宽高比，防止不必要的 HTTP 请求。如果您需要不同比例的图像，请使用此站点将您的图像转换为数据 uri：http://dataurl.net/#dataurlmaker http://dataurl.net/#dataurlmaker
我设法用非常基本的 jQuery 解决了回流问题。在$(window).resize()，我在主体上切换一个类，使比例图像从text-align: left to text-align: justify这会诱使浏览器重排该框。
浏览器支持
适用于 Chrome、Safari、Mobile Safari、Firefox 和 IE9+。整体调整大小相当流畅，但 Safari 有点卡顿。
IE6/7不支持display: inline-block所以盒子的宽度是 100%，高度是正确的。 （不错的后备！）
IE8 正确调整了框的高度，但宽度仅与原始图像一样宽（16px）。我发现解决此问题的唯一方法是使用 HTML5Boilerplate 样式 IE 条件标记将嵌入父级设置为display: block像这个演示 http://codepen.io/shshaw/pen/bfzLJ
CSS Only
If you have要拥有纯 CSS 解决方案，请在比例图像上设置动画以在 Chrome、Safari 和 Firefox 中切换少量填充。然而，这不断地迫使浏览器重新渲染页面布局，与仅在窗口调整大小时渲染页面布局相比，这是非常低效的。
.Ratio { animation: myfirst 1s infinite; }
@keyframes myfirst {
from { padding-top: 1px; }
to { padding-bottom: 1px; }
}
希望有帮助！
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
