这是我想要的：
- 具有单个子元素的容器元素
- 容器元素已被赋予宽度和高度
- 子元素已指定纵横比
- 子元素应在容器元素中尽可能大，但始终保持其纵横比，并且永远不会大于其父元素
- 子元素应该可以在容器中左/中/右和上/中/下定位
HTML 代码很简单：
<div class="container">
<div class="child">I should keep my aspect ratio maximized!</div>
</div>
CSS 部分比较难 ^^' 我尝试用网格解决它，我最好的尝试是这样的：
.container {
height: 200px; /* Sample height. */
width: 150px; /* Sample width. */
background-color: yellow;
overflow: auto; /* Just to make the container... */
resize: both; /* ...resizable for testing. */
display: grid;
grid-template-columns: 100%;
grid-template-rows: 100%;
align-items: center; /* Here I specify start/center/end. */
justify-items: center; /* Here I specify start/center/end. */
}
.child{
aspect-ratio: 3 / 2; /* Here I specify aspect ratio. */
max-width: 100%;
max-height: 100%;
background-color: lime;
overflow: auto;
}<div class="container">
<div class="child">I should keep my aspect ratio maximized!</div>
</div>这对于小容器尺寸非常有效，但是一旦子元素足够宽以将其文本放在一行上，它就会停止增长！我找不到解决这个问题的方法。
如果可以用 HTML 和 CSS 实现我想要的效果，我将非常感激有人能够帮助我，无论是告诉我如何将我的解决方案转变为实用的解决方案，还是建议我可以采用的新方法。