fix(thumbnail): fix original aspect ratio on ios safari

lumapps · Feb 23, 2022 · acb5384 · acb5384
1 parent 5f1534e
commit acb5384
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+-   Thumbnail: fix image original aspect ratio on ios safari.
+
 ## [2.2.3][] - 2022-02-07
 
 ### Added

diff --git a/packages/lumx-core/src/scss/components/thumbnail/_index.scss b/packages/lumx-core/src/scss/components/thumbnail/_index.scss
@@ -39,11 +39,14 @@
 
     &__image {
         display: block;
-        width: fit-content;
         max-width: 100%;
-        height: fit-content;
         max-height: 100%;
         font-size: 0;
+
+        &--has-defined-size {
+            width: fit-content;
+            height: fit-content;
+        }
     }
 
     &__background,

diff --git a/packages/lumx-react/src/components/thumbnail/Thumbnail.tsx b/packages/lumx-react/src/components/thumbnail/Thumbnail.tsx
@@ -188,7 +188,13 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
                         ...focusPointStyle,
                     }}
                     ref={mergeRefs(setImgElement, propImgRef)}
-                    className={classNames(`${CLASSNAME}__image`, isLoading && `${CLASSNAME}__image--is-loading`)}
+                    className={classNames(
+                        handleBasicClasses({
+                            prefix: `${CLASSNAME}__image`,
+                            isLoading,
+                            hasDefinedSize: Boolean(imgProps?.height && imgProps.width),
+                        }),
+                    )}
                     crossOrigin={crossOrigin}
                     src={image}
                     alt={alt}