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

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

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

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

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

Here’s the demo
(这不是我在本地完成的codepen问题)

使用图像和高度的好想法：100％.这肯定会使盒子与图像具有相同的宽高比,但不会因为任何原因重新调整窗口大小的框.

这是一个稍微清洁的CSS和Javascript黑客修复窗口调整大小的回流的演示.

在演示中,我使用16px乘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条件标签来设置嵌入父级显示：块,如this demo

仅限CSS

如果您必须拥有仅限CSS的解决方案,则在比率图像上设置动画以切换少量填充可在Chrome,Safari和Firefox中使用.但是,这会不断强制浏览器重新呈现页面布局,与仅在窗口调整大小上呈现页面布局相比,这是非常低效的.

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

希望有所帮助！

相关文章