Search code examples
htmlcssamp-html

Is it possible to move dimensions of amp-img to inlined css?

Consider following situation:

I have an AMPed page, where I want to display amp-img. In the following situation everything works fine:

<amp-img src="foo" width="100px" height=100px" layout="responsive"/>

The problem is, when I want to save this styling for further usage, like:

<style amp-custom>
  amp-img.default-styling {
    width: 100px;
    height: 100px;
    layout: responsive;
  }
</style>
...
<amp-img class="default-styling" src="foo"/>

Do I really have to customize every picture on my AMPed page, or maybe there is something wrong with my code? Thanks for all advices.

Solution

  • You have to define a width and height in each amp-img instance. That is the data that the amp javascript uses when adjusting your images based on the screen of the device it is being displayed on. Depending on how your page is set up you can insert the images Dynamically with php so you dont have to customize each one.