基于高度调整Div大小但保持纵横比（差不多做到了）奇怪的重新加载错误

Question

7

有很多方法可以在基于父级div的宽度调整视频大小时保持宽高比。大多数解决方案都依赖于“padding-top”和“padding-bottom”是基于宽度而不是高度计算的这一事实。

我想做类似的事情，但我希望根据父级div的高度调整视频大小。

为了做到这一点，我需要创建一个div，无论高度如何都能保持宽高比。这可能有点愚蠢，但我决定使用图像来完成，因为我可以将图像的高度设置为适当的宽高比为100%，然后让高度自动调整。

目前，我已经非常接近实现这一目标。目前，我已经成功使内部div完全按照我的要求工作，除了它不会在窗口大小调整时重绘。但是，如果我重新加载窗口，则可以正常工作。您有什么思路吗？这里是演示（这不是codepen问题，我也在本地测试过）

- coulbourne

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- shshaw · Accepted Answer

使用图像和 height: 100% 的好构想。这肯定会使盒子与图像具有相同的纵横比，但由于某种原因不会在窗口调整大小时重新排列盒子。

这是一个带有稍微简洁的 CSS 和 JavaScript hack 的演示，以修复在窗口调整大小时的重新排列问题。

在演示中，我使用 16px × 9px 的 data uri 图像来设置纵横比，避免了不必要的 HTTP 请求。如果您需要不同纵横比的图像，请使用此网站将您的图像转换为 data 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 对盒子的高度进行了正确的尺寸，但宽度只有原始图像的宽度（16px）。我找到的唯一解决方法是使用 HTML5Boilerplate 样式的 IE 条件标签将嵌入父元素设置为 display:block，就像这个演示中一样。

如果您必须使用纯 CSS 解决方案，在纵横比图像上设置一个动画来切换少量填充在 Chrome、Safari 和 Firefox 中有效。但是，与仅在窗口调整大小时渲染页面布局相比，这会不断强制浏览器重新渲染页面布局，效率极低。

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

希望能帮到您！

基于高度调整Div大小但保持纵横比（差不多做到了） 奇怪的重新加载错误