Html 使元素大小/行为与背景大小相同：包含

是否可以使元素的行为/大小类似于

背景大小：contain

？作为参考，演示

背景大小：contain

（尝试调整浏览器窗口的大小，看看背景图像的作用）

也就是说，我想制作一个具有约束纵横比的元素，其宽度和高度应确保宽度或高度为窗口宽度的100%（另一个是保持比例并使整个元素在没有滚动条的窗口中可见所必需的）

例如，假设我希望一个元素的比率为16:9。如果有人的浏览器窗口超宽而不是很高，那么我希望我的元素的高度是100%，宽度会更小（只要有必要保持元素的比例为16:9）。如果某人的浏览器窗口确实很高，但不是很宽，那么宽度将是100%，高度将更小（同样，保留该元素的目标比率所需的任何东西）

---

我认为实现这一点的唯一方法是使用javascript。是否有一些我不知道的神奇的CSS方法可以实现这一点？

我想您需要一个液体模板视图

如果符合您的需要，请检查此示例

---

谢谢

所以，澄清一下，你想让一个元素的样式保持相同的比例（比如说，16:9），但比例是100%？天哪，太晚了。看起来我说的是“掩护”，而我的意思是“包含”。但是是的，你的想法是对的。我希望一个长度是100%，另一个长度是保持比率并将整个元素保留在窗口中所需的任何长度。让我更新我的问题。感谢您的回答，但是如果您在查看布局时调整浏览器窗口的大小，您将看到框在调整大小时（宽度与高度）都会发生变化。