CODEWITHSUNDEEP
htmlcssamp-html
Lusan Das
Lusan Das

Reputation: 143

amp image getting stretched, for responsive layout

I am trying to contain an image in a wrapper, maintaining its aspect ratio. However the image stretches out. Below is a sample amp html, where I am facing the issue.

<style>
    .image-wrapper {
        width: 150px;
        height: 150px;
        background: teal;
    }
    .image-wrapper img {
        height: auto;
        width: auto;
        max-width: 150px;
        max-height: 150px;
    }
</style>
<div class="image-wrapper">
    <amp-img
        src="http://fyogi.com/public/images/products/mobiles/lg-google-nexus-5x-mqqci.c1.w150.jpg"
        layout="responsive" 
        width="150" 
        height="150">
    </amp-img>
</div>

After rendering the page, this is the amp version

<div class="image-wrapper">
    <amp-img src="http://fyogi.com/public/images/products/mobiles/lg-google-nexus-5x-mqqci.c1.w150.jpg" layout="responsive" width="130" height="130" class="-amp-element -amp-layout-responsive -amp-layout-size-defined -amp-layout" id="AMP_1"><i-amp-sizer style="display: block; padding-top: 100%;"></i-amp-sizer>
    <img amp-img-id="AMP_1" class="-amp-fill-content -amp-replaced-content" width="130" height="130" src="http://fyogi.com/public/images/products/mobiles/lg-google-nexus-5x-mqqci.c1.w150.jpg"></amp-img>
</div>

Below style which is being added by the amp after render, caused it to stretch the image, adding min-width: 100% to the img element

.-amp-fill-content {
    display: block;
    min-width: 100%;
    max-width: 100%;
    height: 100%;
    margin: auto;
}

Now I can fix this with a workaround by adding min-width: auto, but it would defeat the purpose of using amp html layout responsive, and the doc, clearly says that for layout responsive

Element sized to the width of its container element and resizes its height automatically to the aspect ratio given by width and height attributes.

Problem Statement

I have image source with unknown dimensions, but smaller than 150X150px, ideally, either width or height will be 150px. I need this image to be aligned in center/middle(both horizontal and vertical) of a fixed 150X150 division, also if possible I would like to keep all the dimensions in em/rem.

Upvotes: 1

Views: 6595

Answers (3)

vinayak hegde
vinayak hegde

Reputation: 2222

This could be help full....

object-fit: contain increases or decreases the size of the image to fill the container whilst preserving the image's aspect-ratio.

https://ampbyexample.com/advanced/how_to_support_images_with_unknown_dimensions/

 <style>
.fixed-container {
  position: relative;
  width: 200px;
  height: 200px;
 }
 amp-img.contain img {
  object-fit: contain;
 }
   </style>

<div class="flex">
 <div class="fixed-container m1">
<amp-img class="contain"
  layout="fill"
  src="https://unsplash.it/400/300"></amp-img>
</div>
<div class="fixed-container m1">
<amp-img class="contain"
  layout="fill"
  src="https://unsplash.it/300/300"></amp-img>
 </div>
 <div class="fixed-container m1">
<amp-img class="contain"
  layout="fill"
  src="https://unsplash.it/200/300"></amp-img>
</div>
</div>

Upvotes: 1

Syed
Syed

Reputation: 16513

Here is the code that might help.

.image-wrapper img {
//      object-fit: contain; just this line alone can do below job but it's not working in IE. 
        top: 50%;
        left: 50%;
        width: auto;
        height: auto;
        right: inherit;
        bottom: initial;
        max-height: 100%;
        min-width: initial;
        transform: translate(-50%, -50%);
      }

This code also work fine with responsive AMP carousel.

Note: Do not try to add !important else AMP validation will be failed.

Upvotes: 0

Vel
Vel

Reputation: 731

try by adding amp-img to your CSS code

.image-wrapper img, .image-wrapper amp-img {
    height: auto;
    width: auto;
    max-width: 150px;
    max-height: 150px;
}

Upvotes: 2

Related Questions