是否可以使图像以AMP HTML响应，或者我需要在媒体查询中声明每个屏幕分辨率的图像大小? [英] Is it possible to make images responsive in AMP HTML or I need to declare the image size for each screen resolution in my media queries?

问题描述

我网站上的大多数图像都占据整个屏幕宽度，因此在当前的网站版本(而非AMP)中，我将CSS中的所有图像设置为通过以下方式填充整个屏幕宽度:

Most images on my website occupy the whole screen width, so in my current website version (not AMP) I set all the images in my CSS to fill the whole screen width by doing this:

body img { 
  width:100%
}

在AMP中有与此等效的东西吗?

Is there anything equivalent to this in AMP?

推荐答案

如果将layout="responsive"指定为<amp-img>标记的属性，则图像的行为将大致与您所描述的一样.请参见 http:上的示例://www.mirror.co.uk/news/uk-news/bonfire-night-2015-how-keep-6767214.amp

If you specify layout="responsive" as an attribute of the <amp-img> tag then the image will behave roughly like you've described. See an example at http://www.mirror.co.uk/news/uk-news/bonfire-night-2015-how-keep-6767214.amp

<amp-img>标记要求高度&宽度.高度和宽度用于确保为图像保留空间(因为AMP图像是延迟加载的)，并且在调整大小时会考虑长宽比.

The <amp-img> tag requires a height & width. The height and width are used to make sure the space is held open for the image (because AMP images are lazy loaded) and the aspect ratio is respected when it is resized.

这篇关于是否可以使图像以AMP HTML响应，或者我需要在媒体查询中声明每个屏幕分辨率的图像大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！