css:将元素限制为最小值(容器宽度，容器高度)

Question

鉴于以下情况:

<div class="container">
    <div class="content">

    </div>
</div>

有没有一种 CSS 方法可以将 content 元素的高度和宽度动态设置为 container 的两个(高度或宽度)中较小的值？

例如，如果容器是460x320，那么content需要是320x320。如果 container 是 240x333 那么 content 应该是 240x240。
container 的大小是事先不知道的，所以使用固定值是行不通的。
我尝试了各种方法，从 max-height/max-width 到 object-fit 但一直没能成功。

检查这个jsfiddle for a demo (使用javascript)

使用 JavaScript 很容易做到，但如果可能的话，我正在寻找一个纯 CSS 技巧。

Answer 1

• 你所问的是 CSS 无法实现的。 CSS 是一种声明性语言
• 因此没有办法获取元素的大小、比较它的高度和宽度并将其设置为另一个元素。