如何支持未知尺寸的图像

简介

此示例演示了如何在 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 的 fill 布局与 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 上编辑示例