# تصاویر مربعی محصولات (Product Images 1:1 Square Ratio)

> **تاریخ:** اسفند ۱۴۰۴ (February 2026)  
> **وضعیت:** ✅ پیاده‌سازی شده — مرج به production  
> **پروژه:** FrontOffice

---

## ۱. خلاصه

تمامی تصاویر محصولات در سمت مشتری (FrontOffice) در هر دو فروشگاه (عادی و اعتباری) به نسبت **1:1 مربعی** تغییر یافت.

---

## ۲. تغییرات اعمال شده

### ۲.۱ لیست محصولات (Products Grid)

| صفحه | تغییر |
|------|-------|
| `Store/Products.razor` | `height:300px` → حذف ارتفاع ثابت کارت |
| | `height:60%` → `aspect-ratio:1/1; width:100%` |
| `DiscountStore/Products.razor` | همان تغییرات |

**قبل:**
```html
<MudCard Style="cursor:pointer;height: 300px">
  <div style="height: 60%; background-image: url(...)">
```

**بعد:**
```html
<MudCard Style="cursor:pointer;">
  <div style="aspect-ratio:1/1; width:100%; background-image: url(...)">
```

### ۲.۲ جزئیات محصول (Product Detail — Main Image)

| صفحه | تغییر |
|------|-------|
| `Store/ProductDetail.razor` | `max-height:400px` → `aspect-ratio:1/1` |
| `DiscountStore/ProductDetail.razor` | `ObjectFit.Contain` → `ObjectFit.Cover` + `aspect-ratio:1/1` |

### ۲.۳ سبد خرید (Cart)

| صفحه | ویو | تغییر |
|------|-----|-------|
| `Store/Cart.razor` | Desktop (64×64) | `product-thumb` → `rounded-lg` + `ObjectFit.Cover` |
| `Store/Cart.razor` | Mobile (50×50) | `rounded-circle` → `rounded-lg` + `ObjectFit.Cover` |
| `DiscountStore/Cart.razor` | Desktop (64×64) | `product-thumb` → `rounded-lg` + `ObjectFit.Cover` |
| `DiscountStore/Cart.razor` | Mobile (50×50) | `rounded-circle` → `rounded-lg` + `ObjectFit.Cover` |

### ۲.۴ صفحه پرداخت (Checkout Summary)

| صفحه | تغییر |
|------|-------|
| `Store/CheckoutSummary.razor` (48×48) | `rounded-circle` → `rounded-lg` + `ObjectFit.Cover` |
| `DiscountStore/Checkout.razor` (40×40) | `rounded-circle` → `rounded-lg` + `ObjectFit.Cover` |

### ۲.۵ جزئیات سفارش (Order Detail)

| صفحه | ویو | تغییر |
|------|-----|-------|
| `Store/OrderDetail.razor` | Desktop (60×60) | `rounded-circle` → `rounded-lg` + `ObjectFit.Cover` |
| `Store/OrderDetail.razor` | Mobile (60×60) | `rounded-circle` → `rounded-lg` + `ObjectFit.Cover` |

---

## ۳. خلاصه تکنیکال

| الگوی قبلی | الگوی جدید | محل |
|------------|------------|------|
| `height: 60%` + `height: 300px` card | `aspect-ratio: 1/1; width: 100%` + no fixed card height | لیست محصولات |
| `max-height: 400px` | `aspect-ratio: 1/1` | جزئیات محصول |
| `ObjectFit.Contain` | `ObjectFit.Cover` | تصاویر اعتباری |
| `Class="rounded-circle"` | `Class="rounded-lg" ObjectFit="ObjectFit.Cover"` | تمام thumbnailها |
| `Class="product-thumb"` | `Class="rounded-lg" ObjectFit="ObjectFit.Cover"` | سبد خرید Desktop |

---

## ۴. فایل‌های تغییر یافته (۹ فایل)

| فایل | تغییر |
|------|-------|
| `Pages/Store/Products.razor` | ✏️ |
| `Pages/Store/ProductDetail.razor` | ✏️ |
| `Pages/Store/Cart.razor` | ✏️ |
| `Pages/Store/CheckoutSummary.razor` | ✏️ |
| `Pages/Store/OrderDetail.razor` | ✏️ |
| `Pages/DiscountStore/Products.razor` | ✏️ |
| `Pages/DiscountStore/ProductDetail.razor` | ✏️ |
| `Pages/DiscountStore/Cart.razor` | ✏️ |
| `Pages/DiscountStore/Checkout.razor` | ✏️ |