如何支持未知尺寸的图片

简介

本示例演示了如何在 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 上编辑示例