unchained/manoon-headless
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix product images: use fill with aspect-square container
Some checks failed
Build and Deploy / build (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Unchained
2026-03-23 10:45:10 +02:00
parent 7ecd9c2e22
commit f3d60d3c5b
2 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/product/ProductCard.tsx
View File

@@ -34,7 +34,7 @@ export default function ProductCard({ product, index = 0, locale = "SR" }: Produ
alt={localized.name} alt={localized.name}
fill fill
className="object-cover object-center transition-transform duration-700 ease-out group-hover:scale-105" className="object-cover object-center transition-transform duration-700 ease-out group-hover:scale-105"
sizes="100vw" sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
loading="lazy" loading="lazy"
/> />
) : ( ) : (

8
src/components/product/ProductDetail.tsx
View File

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