如何支持未知尺寸的图片

引言

此示例演示了如何在 AMP 页面中嵌入未知尺寸的图像，同时保持正确的宽高比。

背景

为了避免在加载 AMP 页面时出现页面跳动，AMP 运行时的静态布局系统要求提前知道所有元素的高度。这就是为什么 amp-img 扩展需要指定图像的 width 和 height 的原因

<amp-img width="300" height="200" src="https://unsplash.it/300/200?image=1074"></amp-img>

amp-img 扩展支持不同的布局。 responsive 布局需要宽度和高度才能确定图像的宽高比。

<amp-img layout="responsive" width="300" height="200" src="https://unsplash.it/300/200?image=1074"></amp-img>

fixed-height 布局只需要一个高度，但会将图像拉伸以填充可用宽度

<amp-img layout="fixed-height" height="200" src="https://unsplash.it/300/200?image=1074"></amp-img>

fill 布局是 amp-img 支持的唯一不需要任何图像尺寸的布局。但是，图像将在两个维度上拉伸以填充容器

  <div class="fixed-container">
<amp-img layout="fill" src="https://unsplash.it/300/200?image=1074"></amp-img>
  </div>
  <div class="fixed-container">
<amp-img layout="fill" src="https://unsplash.it/200/300?image=1074"></amp-img>
  </div>

问题是：如何在 AMP 页面中嵌入具有未知尺寸的图像，同时保持其正确的宽高比？

使用 Object-Fit 解决问题

我们可以通过将 AMP 的填充布局与 object-fit CSS 属性相结合来解决此问题。 object-fit 属性可帮助我们确保图像在通过 fill 布局调整大小时保持其宽高比。

首先，我们需要定义一个容器来约束图像的最大尺寸，例如：

 .fixed-container {
   position: relative;
   width: 200px;
   height: 200px;
 }

然后，我们可以使用 object-fit 属性来定义 amp-img 扩展中的 img 如何调整大小以保持其宽高比

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

object-fit: contain 会增大或减小图像的大小以填充容器，同时保留图像的宽高比。

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

使用 object-fit: cover，图像将填充其容器的高度和宽度，但通过裁剪图像来保持宽高比

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

使用正确的宽高比的固定高度布局

此方法也适用于响应式容器尺寸，例如，动态宽度

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

结果是保持正确图像宽高比的固定高度布局

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

图片轮播

通过将此方法与使用 fixed-height 布局的 amp-carousel 相结合，此方法也非常适用于图片轮播。

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

需要进一步解释吗？

如果此页面上的说明未能解答您的所有问题，请随时联系其他 AMP 用户以讨论您的具体用例。

转到 Stack Overflow

未解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的持续参与者，但也欢迎您对您特别关注的问题做出一次性贡献。

在 GitHub 上编辑示例