保持div的长宽比，但在CSS中填充屏幕的宽度和高度？
我有一个可以放在一起的网站，它的固定长宽比大约16:9等于风景，例如视频。
我想使它居中并扩展以填充可用的宽度和可用的高度，但不要在任何一侧变大。
例如：
- 高而薄的页面将使内容伸展整个宽度，同时保持成比例的高度。
- 短而宽的页面将使内容伸展到整个高度，并具有成比例的宽度。
我一直在研究两种方法：
- 使用具有正确长宽比的图像来扩展容器
div，但我无法在主要浏览器中以相同的方式表现该图像。 - 设置成比例的底部填充，但这仅相对于宽度有效，而忽略高度。它的宽度会不断增大，并显示垂直滚动条。
我知道您可以使用JS轻松完成此操作，但是我想要一个纯CSS解决方案。
有任何想法吗？
问题答案：
现在指定了一个新的CSS属性来解决此问题：object-fit。
仍然缺乏浏览器支持当前，除了Microsoft以外，大多数浏览器都可以在某种程度上发挥作用-但是给定时间，这正是此问题所需要的。
-
问题内容： 我需要将元素的 宽度 保持为 高度 的百分比。因此，随着高度的变化，宽度也会更新。 通过为padding-top使用％值可以实现相反的效果，但以padding-left为百分比将是对象宽度的百分比，而不是其高度。 因此，使用这样的标记： 我想使用这样的东西： 为了确保根据盒子 的高度保持 盒子的 长宽比 。高度是可变的，因为它的百分比裕度-当窗口的高度改变时，盒子的高度也会改变。 我知
-
问题内容： 我想创建一个div可以随窗口宽度变化而改变其宽度/高度的。 是否有任何CSS3规则可以允许高度根据宽度而改变，同时保持其长宽比？ 我知道我可以通过JavaScript来做到这一点，但我宁愿只使用CSS。 问题答案： 只需使用百分比值创建包装器，如下所示： 它将导致高度等于其容器宽度的75％（长宽比为4：3）。 这取决于以下事实： 相对于生成的盒子的包含块的宽度计算百分比（来源：w3.o
-
给定一个具有设置宽度和高度的框，例如x。 当高度或宽度的边缘满足时，我们如何在该框内制作图像，展开、放大（并保持纵横比）以停止增长/放大。 这意味着您将始终看到该框中图像的整个高度和宽度。 请注意，框中并排包含几个img，因此当我们“滚动”这个“框”时，我们总是可以看到整个图像。 让我用三张图片来说明这一点（每个图片下面都有注释）： 图像上方的第一张图像不填充高度或宽度，但它们保持长宽比。 第二，
-
问题内容： 目前，通过STYLE，我可以在和高度上使用和，反之亦然，但是我仍然不能将图像分别限制在一个特定的位置，无论是太宽还是太高。 有任何想法吗？ 问题答案： 如果仅在图像上定义一维，则将始终保留图像长宽比。 图像是否比您喜欢的更大/更佳？ 您可以将其放入DIV中，该DIV设置为图像所需的最大高度/宽度，然后设置“ overflow：hidden”。那将收获超出您想要的任何东西。 如果图像的宽
-
我已经尝试了上面问题中的其他东西，但我不能得到我想要的结果（状态栏下面的背景图像）。我做错了什么？以下是重要的整个源代码（我排除了样板） PS：我想保留状态栏。我想要的是像链接问题的截图：全屏图像和图像上方的半透明状态栏。如果我将背景图像设置为根布局，我会得到我想要的结果，除了图像纵横比没有保持。见下图。 舱单 这种布局奏效了。
-
问题内容： 是否有可能用图像 填充 div，使得至少一个图像尺寸为100％，另一个尺寸与div相比更宽或相等，同时还要考虑图像的长宽比。 一个示例可以使用这些类，如下所示： 我正在寻找一种纯HTML + CSS解决方案，该解决方案适用于响应矩形（不一定是正方形）的div。由于这个特殊原因，Javascript会很痛苦，因为需要确定每次调整大小时宽度或高度是否应为100％。服务器端甚至都不是一个选择