问题
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%
}
Is there anything equivalent to this in AMP?
回答1:
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
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.
回答2:
Strictly speaking that is scaling the image and not delivering responsive images. If you want to ensure you send only the image size the device actually needs then you need to use srcset and sizes attributes.
回答3:
You can see an example where we use amp-img with srcset for responsive images here: https://ampbyexample.com/components/amp-img/
回答4:
A simple responsive image - width and height are used to determine the aspect ratio. Use alt to specify text that can act as an alternative for the image.
https://amp.dev/documentation/examples/components/amp-img/?referrer=ampbyexample.com
来源：https://stackoverflow.com/questions/33878352/is-it-possible-to-make-images-responsive-in-amp-html-or-i-need-to-declare-the-im