Css 在不知道高度/宽度的情况下，以正确的纵横比将图像包括在放大器中

有没有一种方法可以在不知道AMP的宽度和高度的情况下将图像包含在AMP中？
我尝试过layout=responsive，但它根据给定的高度和宽度拉伸图像，而不是使其响应。（原始图像的纵横比不保持，而是保持给定的高度和宽度值的纵横比）。
我也尝试过layout=fill，它保持纵横比，但如果给定的高度/宽度大于原始图像的高度/宽度，它会创建填充。

---

如果有人能帮我解决这个问题，因为我不知道图像的尺寸，希望在没有填充的情况下以正确的纵横比加载图像。

AMP有一个静态布局，这意味着必须事先知道每个元素的高度。这就是为什么没有办法嵌入尺寸未知的图像。有两种解决办法：

1.）定义一个固定高度的容器，让图像填充可用空间，同时保持正确的纵横比（这可能会导致一些填充）。这可以通过将

layout=fill

与

objectfit:contain

CSS属性相结合来实现

  .fixed-height-container {
     position: relative;
     width: 100%;
     height: 300px;
   }

  amp-img.contain img {
    object-fit: contain;
  }

  <div class="fixed-height-container">
    <amp-img class="contain"
      layout="fill"
      src="https://unsplash.it/400/300"></amp-img>
  </div>

。固定高度容器{
位置：相对位置；
宽度：100%；
高度：300px；
}
amp-img。包含img{
对象匹配：包含；
}

  .fixed-height-container {
     position: relative;
     width: 100%;
     height: 300px;
   }

  amp-img. cover img {
    object-fit: cover;
  }

  <div class="fixed-height-container">
    <amp-img class="cover"
      layout="fill"
      src="https://unsplash.it/400/300"></amp-img>
  </div>