css - CSS 对象适配和纵横比

Question

我对 css 属性 object-fit 和/或 aspect-ratio 有一个小问题。

1. 上下文：我有一个包含图像和一些文本的块（一个大链接）。图像的尺寸和纵横比未知。
2. 我想强制图像尺寸而不变形，使其适合已知纵横比的显示区域。示例：我希望我的图像始终显示在 4/3 区域，宽度 100%，最大宽度 400 像素。我的问题是宽高比，我无法解决。我想要这样：
   • 浏览器查看可用宽度，并计算相应的图像宽度（即，无 pb）
   • 应用 4/3 纵横比来推断显示区域高度
   • 在此区域中显示图像，如果需要放大它，同时保持其固有的纵横比（即，无 pb）

<a href="/foo" class="ctt">
    <picture>
        <img loading="lazy" src="foo" alt="whatever" class="ctt__img">
    </picture>
    <p class="ctt__img__titre">titre image</p>
    <p class="ctt__img__auteur">auteur image</p>
    <h3 class="ctt__titre">titre bloc</h3>
    <p class="ctt__desc">description bloc</p>
</a>

.ctt {
  display: block;
}
.ctt__img {
  width: 100%;
  max-width: 400px;
  object-fit : cover;
}

非常感谢任何帮助