是否可以在 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" 作为 的属性标记，则图像的行为将大致如您所描述的那样.请参阅 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 图像是延迟加载的)，并且在调整大小时遵守纵横比.

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屋！