How To Support AMP-IMG with unknown Dimensions?

How to make Images in Your AMP Blog Articles Tidy, Without adjusting Height and Width on <amp-img>

The most time consuming thing is to convert the image code <img> to <amp-img>. This is very time consuming. 

Even more annoying, we must know exactly the size of the image we upload, because the <amp-img> must include width and height if using layout="responsive".

The problem is if we do not know the dimensions of the image. So if origin inserts width and height, the image will not be neat according to the dimensions.

However, after I learned a lot on the project's official website, I found a more practical way to keep the images that we upload on the articles remain precise and responsive, according to the size of the images uploaded on the blogger article.

Then how? The main key turns out we have to create a new css in our template, and call it when we turn <img> into <amp-img>. 

Copy CSS Fixed-Container

Please copy the CSS code below, and add it below the <style amp-custom = 'amp-custom'> code in your theme's edit panel.

 .fixed-container,.fixed-height-container img{background-color:#ccc}
.contain img{object-fit:contain}
.cover img{object-fit:cover}
.fixed-container{position:relative;width:200px;height:200px}
.fixed-height-container{position:relative;max-width:713px;height:300px;margin-bottom:10px;margin-top:10px;margin-left:-10px;margin-right:-10px}}
amp-img{margin:auto;max-width:100%}
amp-img.container{text-align:center;padding:10px 20px}
@media screen and (max-width:800px){.fixed-height-container{margin-left:-20px;margin-right:-20px}}

Calling CSS Code on AMP-IMG

Then, the next step is to change your article and change the standard amp-img code with special code that I will explain.

When we want to edit <img> to <amp-img> code, use the code below.

 <div class="fixed-height-container">
    <amp-img class="contain" layout="fill" alt="Image description" src="URL-Image"></amp-img>
</div>

So you just change the URL of the image only, without using width and height.
source:amp-blogger Blog