diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css index ac04bbd955..5352468c2b 100644 --- a/src/assets/css/librarybrowser.css +++ b/src/assets/css/librarybrowser.css @@ -261,6 +261,10 @@ max-height: 50vh; } +.primaryImageWrapper > img.aspect-square { + max-height: 45vh; +} + .layout-mobile .primaryImageWrapper { display: block; flex: 1 0 auto; diff --git a/src/controllers/itemDetails/index.js b/src/controllers/itemDetails/index.js index b0e6bc4a33..a32e63e7eb 100644 --- a/src/controllers/itemDetails/index.js +++ b/src/controllers/itemDetails/index.js @@ -600,6 +600,9 @@ function renderPrimaryImage(page, item, apiClient) { const imageElem = page.querySelector('#primaryImage'); imageElem.src = imageUrl; imageElem.alt = item.Name; + if (item.PrimaryImageAspectRatio === 1) { + imageElem.classList.add('aspect-square'); + } page.querySelector('.primaryImageWrapper')?.classList.remove('hide'); } }