Fix product images on mobile: use explicit width/height instead of fill

2026-03-22 21:27:38 +02:00
parent e9b95c44b9
commit 7ecd9c2e22
2 changed files with 7 additions and 6 deletions
--- a/src/components/product/ProductDetail.tsx
+++ b/src/components/product/ProductDetail.tsx
@@ -180,15 +180,15 @@ export default function ProductDetail({ product, relatedProducts, locale = "SR"
              )}

 {/* Main Image */}
-              <div className="relative aspect-square bg-[#f8f9fa] overflow-hidden">
+              <div className="relative bg-[#f8f9fa] overflow-hidden">
                {images[selectedImage] && (
                  <Image
                    src={images[selectedImage].url}
                    alt={images[selectedImage].alt || localized.name}
-                    fill
-                    className="object-cover"
+                    width={600}
+                    height={600}
+                    className="w-full h-auto object-cover"
                    priority
-                    sizes="(max-width: 1024px) 100vw, 50vw"
                  />
                )}
              </div>