Set position of amp img el. inline-block on inner img element. (#36340)

ampproject · Oct 13, 2021 · e9596ec · e9596ec
1 parent 06f0de0
commit e9596ec
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/extensions/amp-story-panning-media/0.1/amp-story-panning-media.css b/extensions/amp-story-panning-media/0.1/amp-story-panning-media.css
@@ -18,13 +18,10 @@ amp-story-panning-media {
 
 amp-story-panning-media amp-img {
   backface-visibility: hidden !important;
-  /* Width explicitly set for mobile chrome, desktop safari & desktop firefox. */
-  width: 100% !important;
-  height: 100% !important;
 }
 
 amp-story-grid-layer[template="fill"] amp-story-panning-media amp-img img {
   /* override for layout=fill */
   position: relative !important;
-  display: block !important;
+  display: inline-block !important;
 }
diff --git a/extensions/amp-story-panning-media/0.1/amp-story-panning-media.js b/extensions/amp-story-panning-media/0.1/amp-story-panning-media.js
@@ -295,6 +295,8 @@ export class AmpStoryPanningMedia extends AMP.BaseElement {
           right: 'auto',
           top: '0',
           bottom: '0',
+          width: 'auto',
+          height: '100%',
         });
         setImportantStyles(imgEl, {
           width: 'auto',
@@ -306,6 +308,8 @@ export class AmpStoryPanningMedia extends AMP.BaseElement {
           right: '0',
           top: 'auto',
           bottom: 'auto',
+          width: '100%',
+          height: 'auto',
         });
         setImportantStyles(imgEl, {
           width: '100%',