How to set width and height attributes for amp-img correctly

Question

I'm in the process of creating my AMP -ified site now, my site is built in bootstrap, and everything reacts so that most of my images are just like this:

img{
  width:100%;
  height:auto;
}

However, the problem that I am facing mine amp-imgis that for the image you need to install widthand height. What is the correct way to make responsive images using amp, in any case, do it without installing heightand width?

Answer 1

B amp requires dimensions to be in the tag for some reason

, , - , amp-script . , .

CSS, ,

(, )

{
  max-width: 100%;
  height: auto;
}

Hide result

Answer 2

AMP layout. amp-img , native; sourceet , "css-" (, 96px/) layout= responsive, . AMP h/w.

.

<amp-img
    src="/img/small.jpg"
    srcset="/img/medium.jpg 640w,
           /img/small.jpg 320w"
    width="1800"
    height="2777"
    layout="responsive"
    alt="Don't forget to add one">
</amp-img>

layout="responsive" AMP, . , - "" (, div).

amp-img amp--. :

<amp-img
    media="(max-width: 639px)"
    src="/img/small.jpg"
    width="450"
    height="694"
    layout="responsive"
    alt="Don't forget to add one">
</amp-img>
<amp-img
    media="(min-width: 639px)"
    src="/img/medium.jpg"
    width="900"
    height="1388"
    layout="responsive"
    alt="Don't forget to add one">
</amp-img>

"media" ( , , ).

: https://www.ampbyexample.com/advanced/layout_system/

Answer 3

, - l ayout , css, .

.ampImg__Wrapper {
  object-fit: contain;
}