7

在根据父 div 的宽度调整视频大小时，有很多解决方案可以保持纵横比。它们中的大多数取决于“padding-top”和“padding-bottom”是基于宽度而不是高度计算的事实。

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

为此，我需要创建一个无论高度如何都保持纵横比的 div。这可能是一种蹩脚的方式，但我决定使用图像来执行此操作，因为我可以将具有适当纵横比的图像的高度设置为 100%，然后让高度自行排序。

我非常接近完成这项工作。到目前为止，我已经能够让内部 div 完全按照我的意愿去做，除了它不会在调整窗口大小时重绘。但是，如果我调整窗口大小然后重新加载，它可以工作。有任何想法吗？

这是演示 （这不是我在本地完成的代码笔问题）

4

1 回答 1

4

使用图像和height: 100%. 这肯定会使框与图像具有相同的纵横比，但无论出于何种原因，都不会在窗口调整大小时重新排列框。

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

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

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

浏览器支持

适用于 Chrome、Safari、Mobile Safari、Firefox 和 IE9+。调整大小总体上非常流畅，但 Safari 有点口吃。

IE6/7 不支持display: inline-block所以框是 100% 宽度和正确的高度。（不是一个糟糕的后备！）

IE8 正确调整了框的高度，但宽度仅与原始图像一样宽（16 像素）。我发现的唯一方法是使用 HTML5Boilerplate 样式的 IE 条件标签将嵌入父级设置为display: block喜欢这个演示

仅 CSS

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

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

希望有帮助！

于 2013-10-08T17:31:45.527 回答