From 84b6e6f7aa033ad61a9cbe0bb12a7d467aeb4156 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <joen@automattic.com>
Date: Wed, 28 Jun 2017 15:50:09 +0200
Subject: [PATCH] Fix for IE11.

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

diff --git a/blocks/library/gallery/gallery-image.js b/blocks/library/gallery/gallery-image.js
index 773f46759caa2..efa1f1133cf9b 100644
--- a/blocks/library/gallery/gallery-image.js
+++ b/blocks/library/gallery/gallery-image.js
@@ -1,7 +1,19 @@
 
 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">
+		<figure className="blocks-gallery-image" style={ croppedImage }>
 			<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 4c605d0a3bf58..b38d2d2524ef1 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -143,7 +143,7 @@ registerBlockType( 'core/gallery', {
 			),
 			<div key="gallery" className={ `blocks-gallery align${ align } columns-${ columns } ${ imageCrop ? 'is-cropped' : '' }` }>
 				{ images.map( ( img ) => (
-					<GalleryImage key={ img.url } img={ img } />
+					<GalleryImage key={ img.url } img={ img } crop={ imageCrop } />
 				) ) }
 			</div>,
 		];
diff --git a/blocks/library/gallery/style.scss b/blocks/library/gallery/style.scss
index e36f1fcaa2532..1ec45589d8bae 100644
--- a/blocks/library/gallery/style.scss
+++ b/blocks/library/gallery/style.scss
@@ -17,18 +17,13 @@
 		}
 	}
 
-	// Cropped
+	// Cropped shows background instead
 	&.is-cropped .blocks-gallery-image {
-		img {
-			width: 100%;
-			height: 100%;
-			object-fit: cover;
-		}
+		background-position: center center;
+		background-size: cover;
 
-		// IE10+ hack
-		_:-ms-lang(x), img {
-			height: auto;
-			width: auto;
+		img {
+			visibility: hidden;
 		}
 	}