From 5ebb52ff678acd9f9326fb2899581435a3d4c47b Mon Sep 17 00:00:00 2001
From: Joen Asmussen <joen@automattic.com>
Date: Thu, 29 Jun 2017 11:13:17 +0200
Subject: [PATCH] Revert back to object-fit.

---
 blocks/library/gallery/gallery-image.js | 14 +-------------
 blocks/library/gallery/index.js         |  2 +-
 blocks/library/gallery/style.scss       | 15 ++++++++++-----
 3 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/blocks/library/gallery/gallery-image.js b/blocks/library/gallery/gallery-image.js
index efa1f1133cf9be..773f46759caa27 100644
--- a/blocks/library/gallery/gallery-image.js
+++ b/blocks/library/gallery/gallery-image.js
@@ -1,19 +1,7 @@
 
 export default function GalleryImage( props ) {
-	if ( ! props.crop ) {
-		return (
-			<figure className="blocks-gallery-image">
-				<img src={ props.img.url } alt={ props.img.alt } />
-			</figure>
-		);
-	}
-
-	const croppedImage = {
-		backgroundImage: 'url(' + props.img.url + ')',
-	};
-
 	return (
-		<figure className="blocks-gallery-image" style={ croppedImage }>
+		<figure className="blocks-gallery-image">
 			<img src={ props.img.url } alt={ props.img.alt } />
 		</figure>
 	);
diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
index ca50a8683c402d..6963464a9db174 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -143,7 +143,7 @@ registerBlockType( 'core/gallery', {
 			),
 			<div key="gallery" className={ `${ className } align${ align } columns-${ columns } ${ imageCrop ? 'is-cropped' : '' }` }>
 				{ images.map( ( img ) => (
-					<GalleryImage key={ img.url } img={ img } crop={ imageCrop } />
+					<GalleryImage key={ img.url } img={ img } />
 				) ) }
 			</div>,
 		];
diff --git a/blocks/library/gallery/style.scss b/blocks/library/gallery/style.scss
index 7c1528069f91a4..e4b7d4d33bd012 100644
--- a/blocks/library/gallery/style.scss
+++ b/blocks/library/gallery/style.scss
@@ -17,13 +17,18 @@
 		}
 	}
 
-	// Cropped shows background instead
+	// Cropped
 	&.is-cropped .blocks-gallery-image {
-		background-position: center center;
-		background-size: cover;
-
 		img {
-			visibility: hidden;
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+
+		// Alas, IE11+ doesn't support object-fit
+		_:-ms-lang(x), img {
+			height: auto;
+			width: auto;
 		}
 	}