diff --git a/frontend/src/features/gallery/components/CurrentImageDisplay.scss b/frontend/src/features/gallery/components/CurrentImageDisplay.scss index 69f60d83a4..10dd52525d 100644 --- a/frontend/src/features/gallery/components/CurrentImageDisplay.scss +++ b/frontend/src/features/gallery/components/CurrentImageDisplay.scss @@ -18,13 +18,11 @@ height: 100%; img { - background-color: var(--img2img-img-bg-color); border-radius: 0.5rem; object-fit: contain; max-width: 100%; max-height: 100%; height: auto; - width: max-content; position: absolute; cursor: pointer; } diff --git a/frontend/src/features/gallery/components/CurrentImagePreview.tsx b/frontend/src/features/gallery/components/CurrentImagePreview.tsx index d12c172d13..d000a81e82 100644 --- a/frontend/src/features/gallery/components/CurrentImagePreview.tsx +++ b/frontend/src/features/gallery/components/CurrentImagePreview.tsx @@ -10,7 +10,10 @@ import { } from 'features/gallery/store/gallerySlice'; import { createSelector } from '@reduxjs/toolkit'; import _ from 'lodash'; -import { OptionsState, setIsLightBoxOpen } from 'features/options/store/optionsSlice'; +import { + OptionsState, + setIsLightBoxOpen, +} from 'features/options/store/optionsSlice'; import ImageMetadataViewer from './ImageMetaDataViewer/ImageMetadataViewer'; export const imagesSelector = createSelector( @@ -30,6 +33,7 @@ export const imagesSelector = createSelector( return { imageToDisplay: intermediateImage ? intermediateImage : currentImage, + isIntermediate: Boolean(intermediateImage), viewerImageToDisplay: currentImage, currentCategory, isOnFirstImage: currentImageIndex === 0, @@ -56,6 +60,7 @@ export default function CurrentImagePreview() { isOnLastImage, shouldShowImageDetails, imageToDisplay, + isIntermediate, } = useAppSelector(imagesSelector); const [shouldShowNextPrevButtons, setShouldShowNextPrevButtons] = @@ -89,6 +94,9 @@ export default function CurrentImagePreview() { width={imageToDisplay.width} height={imageToDisplay.height} onClick={handleLightBox} + style={{ + imageRendering: isIntermediate ? 'pixelated' : 'initial', + }} /> )} {!shouldShowImageDetails && (