Skip to content

Commit

Permalink
Ensure <img> elements converted to <amp-img> which have layout=intris…
Browse files Browse the repository at this point in the history
…inc also get object-fit:contain

This guards against image stretching.

See <ampproject/amphtml#21371 (comment)>.
Props @cathyxz
  • Loading branch information
westonruter committed Apr 2, 2019
1 parent 835e1da commit e1296f7
Showing 1 changed file with 8 additions and 3 deletions.
11 changes: 8 additions & 3 deletions assets/css/amp-default.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
.amp-wp-unknown-size [src] {
/** Worst case scenario when we can't figure out dimensions for an image. **/
/** Force the image into a box of fixed dimensions and use object-fit to scale. **/

/*
* Prevent cases of amp-img converted from img to appear with stretching by using object-fit to scale.
* See <https://github.com/ampproject/amphtml/issues/21371#issuecomment-475443219>.
* Also use object-fit:contain in worst case scenario when we can't figure out dimensions for an image.
*/
amp-img.amp-wp-enforced-sizes[layout=intrinsic] > img,
.amp-wp-unknown-size > img {
object-fit: contain;
}

Expand Down

0 comments on commit e1296f7

Please sign in to comment.