Menu
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?
570
To make an image responsive, you need to give a new value to its width property. Then the height of the image will adjust itself automatically. The important thing to know is that you should always use relative units for the width property like percentage, rather than absolute ones like pixels.
One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels. For example, the original image is 640×960.
Create responsive images by adding an . img-responsive class to the <img> tag. The image will then scale nicely to the parent element.
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.
156
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
