Fix for IE11.

WordPress · Jun 28, 2017 · 84b6e6f · 84b6e6f
1 parent 653a942
commit 84b6e6f
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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;
 		}
 	}