【发布时间】：2015-07-15 05:26:18
【问题描述】：
标题有点误导，因为简单地保持和 html 元素的纵横比是微不足道的，使用宽度和 padding-bottom 或 padding-top 百分比。但是，我的情况有点不同。也许解决方案同样微不足道，但我的大脑已经炸了。
所以在我的例子中，我在容器 div 中有一个内容 div。假设容器 div 可以具有任何尺寸和大小。要求是内部 div 需要保持自己的纵横比，但还需要适应容器 div 的高度或宽度，以更接近内容 div 的纵横比为准。
例如，我的内容 div 的纵横比为 16:9。我的容器 div 目前是 500px 宽和 1000px 高。在这种情况下，我的内容 div 将自己调整为 500 像素宽和 281 像素高，内容 div 上方和下方都有空白。现在容器 div 可能会被调整为 1000px 宽和 500px 高，在这种情况下，内容 div 将自己调整为 889px 宽和 500px 高，内容 div 的左右两侧有空白。
可能有一种不那么复杂的方式来解释这种情况，但是今天我的大脑又炸了。任何帮助将不胜感激。
编辑：我正在寻找仅 CSS 的解决方案。我知道这可以通过 JS/JQuery 实现。
【问题讨论】：
-
你需要一些 jquery，它很适合它
-
这对于具有固有纵横比的替换元素是不可能的，因此他们不得不引入
object-fit。所以我想非替换元素是不可能的。