保持div的长宽比，但在CSS中填充屏幕的宽度和高度？
我有一个可以放在一起的网站，它的固定长宽比大约16:9等于风景，例如视频。
我想使它居中并扩展以填充可用的宽度和可用的高度，但不要在任何一侧变大。
- 高而薄的页面将使内容伸展整个宽度，同时保持成比例的高度。
- 短而宽的页面将使内容伸展到整个高度，并具有成比例的宽度。
我一直在研究两种方法：
- 使用具有正确长宽比的图像来扩展容器
div，但我无法在主要浏览器中以相同的方式表现该图像。 - 设置成比例的底部填充，但这仅相对于宽度有效，而忽略高度。它的宽度会不断增大，并显示垂直滚动条。
我知道您可以使用JS轻松完成此操作，但是我想要一个纯CSS解决方案。
有任何想法吗？
回答：
现在指定了一个新的CSS属性来解决此问题：object-fit。
仍然缺乏浏览器支持当前，除了Microsoft以外，大多数浏览器都可以在某种程度上发挥作用-但是给定时间，这正是此问题所需要的。
以上是 保持div的长宽比，但在CSS中填充屏幕的宽度和高度？ 的全部内容， 来源链接： utcz.com/qa/407386.html
