diff --git a/src/components/cardbuilder/card.css b/src/components/cardbuilder/card.css
index 854ed6a5f7..74c376e85b 100644
--- a/src/components/cardbuilder/card.css
+++ b/src/components/cardbuilder/card.css
@@ -239,33 +239,13 @@ button::-moz-focus-inner {
     border: none;
 }
 
-.cardImage-img {
-    max-height: 100%;
-    max-width: 100%;
-
-    /* This is simply for lazy image purposes, to ensure the image is visible sooner when scrolling */
-    min-height: 70%;
-    min-width: 70%;
-    margin: auto;
-}
-
-.coveredImage-img {
-    width: 100%;
-    height: 100%;
-}
-
-.coveredImage-noscale-img {
-    max-height: none;
-    max-width: none;
-}
-
 .coveredImage {
     background-size: cover;
     background-position: center center;
 }
 
-.coveredImage-noScale {
-    background-size: cover;
+.coveredImage.coveredImage-contain {
+    background-size: contain;
 }
 
 .cardFooter {
diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js
index d0a8c67f94..c2141295ee 100644
--- a/src/components/cardbuilder/cardBuilder.js
+++ b/src/components/cardbuilder/cardBuilder.js
@@ -1212,8 +1212,8 @@ import 'programStyles';
             if (coveredImage) {
                 cardImageContainerClass += ' coveredImage';
 
-                if (item.MediaType === 'Photo' || item.Type === 'PhotoAlbum' || item.Type === 'Folder' || item.ProgramInfo || item.Type === 'Program' || item.Type === 'Recording') {
-                    cardImageContainerClass += ' coveredImage-noScale';
+                if (item.Type === 'TvChannel') {
+                    cardImageContainerClass += ' coveredImage-contain';
                 }
             }
 
diff --git a/src/controllers/session/login/index.js b/src/controllers/session/login/index.js
index 8bac557a20..e8541563f0 100644
--- a/src/controllers/session/login/index.js
+++ b/src/controllers/session/login/index.js
@@ -115,11 +115,11 @@ import 'emby-checkbox';
                     tag: user.PrimaryImageTag,
                     type: 'Primary'
                 });
-                html += '<div class="cardImageContainer coveredImage coveredImage-noScale" style="background-image:url(\'' + imgUrl + "');\"></div>";
+                html += '<div class="cardImageContainer coveredImage" style="background-image:url(\'' + imgUrl + "');\"></div>";
             } else {
                 const background = getMetroColor(user.Id);
                 imgUrl = 'assets/img/avatar.png';
-                html += '<div class="cardImageContainer coveredImage coveredImage-noScale" style="background-image:url(\'' + imgUrl + "');background-color:" + background + ';"></div>';
+                html += '<div class="cardImageContainer coveredImage" style="background-image:url(\'' + imgUrl + "');background-color:" + background + ';"></div>';
             }
 
             html += '</div>';