如何仅使用CSS保持html容器的纵横比

Question

标题有点误导，因为简单地保持html元素的纵横比是微不足道的，使用width和padding-bottom或padding-top百分比。但是，我的情况有点不同。也许解决方案同样微不足道，但我的大脑被炸了。

所以在我的情况下，我有一个容器div内容div。假设是容器div可以有任何尺寸和大小。要求是内部div需要保持它自己的宽高比，但也需要适合容器div的高度或宽度，无论哪一个更接近内容div的宽高比。

因此，例如，我的内容div的纵横比为16：9。我的容器div目前宽500px，高1000px。在这种情况下，我的内容div将自己设置为500px宽和281px高，白色空间高于和低于content div。现在容器div可能会被调整为1000px宽和500px高，在这种情况下，内容div会自动调整为889px宽和500px高，内容div的左侧和右侧会有空格。

这可能是一种不太复杂的方式来解释这种情况，但我的大脑今天再次煎炸。任何帮助，将不胜感激。

编辑：我正在寻找一个CSS唯一的解决方案。我知道这是可能的JS/JQuery。

Answer 1

你想要做的是使用像object-fit: cover这样的东西在你的情况下具有最好看的效果。不幸的是，如上所述，在这种情况下，仅使用CSS的解决方案不会产生期望的结果，因此需要使用JavaScript/jQuery。