refactor: preview-image adaptive for touch and aspect-ratio

Stepasha419a · Sep 2, 2024 · 44192cc · 44192cc
1 parent b2d5e38
commit 44192cc
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/.../user/ui/Preview/components/PreviewWrapper/components/FullPreview/FullPreview.module.scss b/.../user/ui/Preview/components/PreviewWrapper/components/FullPreview/FullPreview.module.scss
@@ -108,7 +108,7 @@
   }
 }
 
-@media (max-width: 900px) {
+@media (max-width: 900px) or (hover: none) {
   .preview .slider {
     $widthWithHeightAspectRatio: 100vw * 1.25;
 

diff --git a/src/entities/user/ui/Preview/components/UserSlider/UserSlider.module.scss b/src/entities/user/ui/Preview/components/UserSlider/UserSlider.module.scss
@@ -3,7 +3,7 @@
   z-index: -1;
 }
 
-@media (max-width: 900px) {
+@media (max-width: 900px) or (hover: none) {
   .image {
     &.full {
       object-fit: cover;

diff --git a/src/shared/ui/ImagesSlider/ImageSlider.module.scss b/src/shared/ui/ImagesSlider/ImageSlider.module.scss
@@ -21,7 +21,15 @@
   }
 }
 
-@media (max-width: 900px) and (min-aspect-ratio: 3/4) {
+@media (max-width: 900px) and (max-aspect-ratio: 5/8) {
+  .slider {
+    .item {
+      object-fit: contain;
+    }
+  }
+}
+
+@media (max-width: 900px) and (min-aspect-ratio: 1) {
   .slider {
     .item {
       object-fit: contain;