如何在 Angular 中使用 ngOptimizedImage 根据宽度选择图像高度

Question

根据 Angular 文档（以及我在编码时的经历），使用 ngSrc/ngOptimizedImage 将 img 转换为绝对位置（https://angular.dev/guide/image-optimization#using-fill-mode）。

这意味着以前直接设置图像样式的方法（将图像的宽度设置为 100%，并动态确定高度）不再有效。这是因为我们必须首先使用相对位置在父容器上设置预定义的高度，以填充要填充的 img 绝对位置。

非常感谢有关如何实现根据宽度动态选择图像高度的响应式图像的任何建议。谢谢你。

Answer 1

目前我最好的方法如下：

.image-container {
  position: relative;
  width: 100%;  /* Ensures container adapts to parent width */
}

.image-container img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.image-container::after {
  content: "";
  display: block;
  padding-top: 50%;
}

padding-top: 50% 在绝对位置内将推高父位置相对高度。这很棒。如果我有一种方法动态获取宽度与高度的比率，我就可以用一种现实的方法来实时确定这一点。这将是最后一篇研究的文章。