根据高度调整Div的大小但保留纵横比(几乎得到它)Strange Reload bug

Question

根据父div的宽度调整视频大小时,有很多解决方案可以保持宽高比.它们中的大多数取决于"填充顶部"和"填充底部"是基于宽度而不是高度计算的事实.

我正在尝试做类似的事情,但我想根据父div的高度调整视频大小.

要做到这一点,我需要创建一个不管高度如何都保持纵横比的div.这可能是一种蹩脚的方式,但我决定使用图像来做到这一点,因为我可以将图像的高度设置为100%的适当宽高比,并让高度排序.

我非常接近于完成这项工作.到目前为止,我已经能够使内部div完全按照我想要的方式执行,除了它不会在窗口调整大小上重绘.但是,如果我调整窗口大小然后重新加载,它就可以工作.有任何想法吗？

这是演示 (这不是我在本地完成的codepen问题)

Answer 1

使用图像和的好想法height: 100%。这肯定会使框的宽高比与图像相同，但无论出于何种原因，都不会在窗口调整大小时回流框。

这是一个稍微简洁的 CSS 和 Javascript hack 的演示，用于修复窗口调整大小时的回流。

在演示中，我使用 16px x 9px 数据 uri 图像来设置宽高比，防止不必要的 HTTP 请求。如果您需要不同比例的图像，请使用此站点将您的图像转换为数据 uri：http://dataurl.net/#dataurlmaker

我设法用非常基本的 jQuery 解决了回流问题。在上$(window).resize()，我在主体上切换一个类，使比例图像从变为，text-align: left从而text-align: justify欺骗浏览器重排框。

适用于 Chrome、Safari、Mobile Safari、Firefox 和 IE9+。整体调整大小相当流畅，但 Safari 有点卡顿。

IE6/7 不支持display: inline-block，所以盒子是 100% 宽度和正确的高度。（不错的后备！）

IE8 正确调整了框的高度，但宽度仅与原始图像一样宽（16px）。我发现解决此问题的唯一方法是使用 HTML5Boilerplate 样式 IE 条件标记将嵌入父项设置为类似于此演示display: block中的内容

如果您必须采用纯 CSS 解决方案，则可以在 Chrome、Safari 和 Firefox 中在比例图像上设置动画来切换少量填充。然而，这不断地迫使浏览器重新渲染页面布局，与仅在窗口调整大小时渲染页面布局相比，这是非常低效的。

.Ratio { animation: myfirst 1s infinite; }
@keyframes myfirst {
    from { padding-top: 1px; }
    to { padding-bottom: 1px; }
}

希望有帮助！