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 ( - - - - ); - } - - const croppedImage = { - backgroundImage: 'url(' + props.img.url + ')', - }; - return ( - + ); 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', { ), { images.map( ( img ) => ( - + ) ) } , ]; 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; } }