diff --git a/resources/ext.popups.core.js b/resources/ext.popups.core.js
index 66475cfa7..bdbf3dff4 100644
--- a/resources/ext.popups.core.js
+++ b/resources/ext.popups.core.js
@@ -81,10 +81,20 @@
 				return $( '<span>' );
 			}
 
-			var $thumbnail = $( '<img>' )
-				.attr( 'src', thumbnail.source )
-				.removeClass( 'mwe-popups-is-tall mwe-popups-is-not-tall' )
-				.addClass( tall ? 'mwe-popups-is-tall' : 'mwe-popups-is-not-tall' );
+			var $thumbnail;
+
+			if ( tall ) {
+				// This is to mask and center the image within a given size
+				$thumbnail = $( '<div>' )
+					.removeClass( 'mwe-popups-is-tall mwe-popups-is-not-tall' )
+					.addClass( 'mwe-popups-is-tall' )
+					.css( 'background-image', 'url(' + thumbnail.source + ')');
+			} else {
+				$thumbnail = $( '<img>' )
+					.attr( 'src', thumbnail.source )
+					.removeClass( 'mwe-popups-is-tall mwe-popups-is-not-tall' )
+					.addClass( 'mwe-popups-is-not-tall' );
+			}
 
 
 			return $thumbnail;
diff --git a/resources/ext.popups.core.less b/resources/ext.popups.core.less
index 7706d0bee..84c53f633 100644
--- a/resources/ext.popups.core.less
+++ b/resources/ext.popups.core.less
@@ -29,10 +29,22 @@
 			padding-bottom: 3.84em;
 		}
 
-		> img.mwe-popups-is-tall{
+		> div.mwe-popups-is-tall{
 			float: right;
 			height: 250px;
-			padding-left: 1.28em;
+			width: 200px;
+			padding: 0;
+			background-size: cover;
+			background-repeat: no-repeat;
+			overflow: hidden;
+
+			img {
+				min-height: 100%;
+				min-width: 100%;
+				-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+				filter: alpha(opacity=0);
+				opacity: 0
+			}
 		}
 
 		> img.mwe-popups-is-not-tall{