amphtml: amp-img with layout intrinsic stretches to fill parent if display: block
It’s possible and sometimes common to have CSS overrides to set amp-img
to display: block
. When this happens, <amp-img>
with layout intrinsic
ends up stretching to fill the entire parent container instead of maintaining its correct aspect ratio.
Here’s a minimal repro: https://codepen.io/cathyxz/pen/PLJmyQ. When display: block !important
is applied to <amp-img>
, the image stretches to fill the container width.
~Related: https://codepen.io/cathyxz/pen/JzmLYE. When display: inline
is applied to <amp-img>
with layout=intrinsic, the image fails to render.~ behaving as intended.
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Comments: 19 (16 by maintainers)
Commits related to this issue
- Ensure <img> elements converted to <amp-img> which have layout=intrisinc also get object-fit:contain This guards against image stretching. See <https://github.com/ampproject/amphtml/issues/21371#iss... — committed to ampproject/amp-wp by westonruter 5 years ago
- Ensure <img> elements converted to <amp-img> which have layout=intrisinc also get object-fit:contain This guards against image stretching. See <https://github.com/ampproject/amphtml/issues/21371#iss... — committed to ampproject/amp-wp by westonruter 5 years ago
@DrLightman Have you tried
object-position: left center
?Thanks for pointing out the experiment info for me over chat.
The opt-in has been added! https://github.com/ampproject/amp-wp/pull/2036/commits/034ac82d3307413a422f9d53d14a274b6f785713
See in action here: https://2019-theme.amp-wp.org/bison-image-test/?amp