چیدمان تصاویر - فراغیب

→ تفاوت با ویرایش قدیمی‌تر تفاوت با ویرایش جدیدتر ←

نسخهٔ ‏۷ ژوئیهٔ ۲۰۲۶، ساعت ۰۷:۴۴

               توضیحات عکس بزرگ اول

               توضیحات عکس بزرگ دوم

               توضیحات ۱

               توضیحات ۲

               توضیحات ۳

               توضیحات ۴

@@ خط ۱: / خط ۱: @@
-<!-- کانتینر اصلی گالری - کاملاً وسط‌چین -->
+<!-- شروع کانتینر اصلی گالری با پس‌زمینه آبی آسمانی ابر و بادی و چیدمان وسط‌چین -->
-<div style="max-width: 1000px; margin: 0 auto; padding: 15px; direction: rtl; text-align: center;">
+<div style="max-width: 1000px; margin: 0 auto; padding: 20px; direction: rtl; text-align: center;
+            background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #f0f9ff 100%); /* ایجاد رنگ پس‌زمینه ابر و بادی */
+            border-radius: 16px; /* منحنی کردن گوشه‌های کل باکس گالری */
+            box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* ایجاد سایه ملایم دور کادر */">
-     <!-- ردیف اول: دو عکس بزرگ (همیشه کنار هم) -->
+     <!-- ردیف اول: دو عکس بزرگ (همواره کنار هم در موبایل و دسکتاپ) -->
      <div style="display: flex; gap: 15px; justify-content: center; margin-bottom: 20px;">
          <!-- عکس بزرگ اول -->
-         <div style="flex: 1; max-width: 480px; display: flex; flex-direction: column; align-items: center; border: 1px solid #ccc; background-color: #f9f9f9; padding: 8px; box-sizing: border-box;">
+         <div style="flex: 1; max-width: 480px; display: flex; flex-direction: column; align-items: center; border: 1px solid #b3e5fc; background-color: rgba(255, 255, 255, 0.85); padding: 8px; box-sizing: border-box;
-             <div style="width: 100%; aspect-ratio: 4/3; overflow: hidden; display: flex; align-items: center; justify-content: center;">
+                    border-radius: 12px; /* منحنی کردن گوشه‌های کادر تصویر بزرگ اول */">
+            <!-- نگهدارنده تصویر بزرگ جهت برش و هم‌ترازی با نسبت ۴:۳ -->
+             <div style="width: 100%; aspect-ratio: 4/3; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 8px;">
                  [[File:3.jpg|thumb|link=|class=not-resized|350px|center]]
              </div>
-             <div style="margin-top: 8px; font-size: 90%; color: #333; font-weight: bold; text-align: center;">توضیحات عکس بزرگ اول</div>
+            <!-- کپشن تک‌خطی تصویر بزرگ اول -->
+             <div style="margin-top: 8px; font-size: 90%; color: #0288d1; font-weight: bold; text-align: center; width: 100%;
+                        white-space: nowrap; /* جلوگیری از شکستن خط و دوخطی شدن متن */
+                        overflow: hidden; /* پنهان کردن حروف اضافه از کادر */
+                        text-overflow: ellipsis; /* قرار دادن سه نقطه (...) در صورت طولانی بودن متن */">
+                توضیحات عکس بزرگ اول
+            </div>
          </div>
          <!-- عکس بزرگ دوم -->
-         <div style="flex: 1; max-width: 480px; display: flex; flex-direction: column; align-items: center; border: 1px solid #ccc; background-color: #f9f9f9; padding: 8px; box-sizing: border-box;">
+         <div style="flex: 1; max-width: 480px; display: flex; flex-direction: column; align-items: center; border: 1px solid #b3e5fc; background-color: rgba(255, 255, 255, 0.85); padding: 8px; box-sizing: border-box;
-             <div style="width: 100%; aspect-ratio: 4/3; overflow: hidden; display: flex; align-items: center; justify-content: center;">
+                    border-radius: 12px; /* منحنی کردن گوشه‌های کادر تصویر بزرگ دوم */">
+            <!-- نگهدارنده تصویر بزرگ جهت برش و هم‌ترازی با نسبت ۴:۳ -->
+             <div style="width: 100%; aspect-ratio: 4/3; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 8px;">
                  [[File:7.jpg|thumb|link=|class=not-resized|350px|center]]
              </div>
-             <div style="margin-top: 8px; font-size: 90%; color: #333; font-weight: bold; text-align: center;">توضیحات عکس بزرگ دوم</div>
+            <!-- کپشن تک‌خطی تصویر بزرگ دوم -->
+             <div style="margin-top: 8px; font-size: 90%; color: #0288d1; font-weight: bold; text-align: center; width: 100%;
+                        white-space: nowrap; /* جلوگیری از شکستن خط */
+                        overflow: hidden;
+                        text-overflow: ellipsis;">
+                توضیحات عکس بزرگ دوم
+            </div>
          </div>
      </div>
-     <!-- ردیف دوم: چهار عکس کوچک (همیشه و تحت هر شرایطی در یک ردیف در موبایل و دسکتاپ باقی می‌مانند) -->
+     <!-- ردیف دوم: چهار عکس کوچک (همواره در یک ردیف در موبایل و دسکتاپ) -->
      <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; justify-content: center;">
          <!-- عکس کوچک ۱ -->
-         <div style="display: flex; flex-direction: column; align-items: center; border: 1px solid #ddd; background-color: #f9f9f9; padding: 4px; box-sizing: border-box;">
+         <div style="display: flex; flex-direction: column; align-items: center; border: 1px solid #e1f5fe; background-color: rgba(255, 255, 255, 0.9); padding: 4px; box-sizing: border-box;
-             <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center;">
+                    border-radius: 8px; /* منحنی کردن گوشه‌های کادر تصویر کوچک اول */">
+            <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
+             <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 6px;">
                  [[File:1.jpg|thumb|link=|class=not-resized|150px|center]]
              </div>
-             <div style="margin-top: 5px; font-size: 80%; color: #555; text-align: center; word-break: break-all;">توضیحات ۱</div>
+            <!-- کپشن تک‌خطی تصویر کوچک اول -->
+             <div style="margin-top: 5px; font-size: 80%; color: #039be5; text-align: center; width: 100%;
+                        white-space: nowrap; /* جلوگیری از دوخطی شدن متن */
+                        overflow: hidden;
+                        text-overflow: ellipsis;">
+                توضیحات ۱
+            </div>
          </div>
          <!-- عکس کوچک ۲ -->
-         <div style="display: flex; flex-direction: column; align-items: center; border: 1px solid #ddd; background-color: #f9f9f9; padding: 4px; box-sizing: border-box;">
+         <div style="display: flex; flex-direction: column; align-items: center; border: 1px solid #e1f5fe; background-color: rgba(255, 255, 255, 0.9); padding: 4px; box-sizing: border-box;
-             <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center;">
+                    border-radius: 8px; /* منحنی کردن گوشه‌های کادر تصویر کوچک دوم */">
+            <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
+             <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 6px;">
                  [[File:2.jpg|thumb|link=|class=not-resized|150px|center]]
              </div>
-             <div style="margin-top: 5px; font-size: 80%; color: #555; text-align: center; word-break: break-all;">توضیحات ۲</div>
+            <!-- کپشن تک‌خطی تصویر کوچک دوم -->
+             <div style="margin-top: 5px; font-size: 80%; color: #039be5; text-align: center; width: 100%;
+                        white-space: nowrap; /* جلوگیری از دوخطی شدن متن */
+                        overflow: hidden;
+                        text-overflow: ellipsis;">
+                توضیحات ۲
+            </div>
          </div>
          <!-- عکس کوچک ۳ -->
-         <div style="display: flex; flex-direction: column; align-items: center; border: 1px solid #ddd; background-color: #f9f9f9; padding: 4px; box-sizing: border-box;">
+         <div style="display: flex; flex-direction: column; align-items: center; border: 1px solid #e1f5fe; background-color: rgba(255, 255, 255, 0.9); padding: 4px; box-sizing: border-box;
-             <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center;">
+                    border-radius: 8px; /* منحنی کردن گوشه‌های کادر تصویر کوچک سوم */">
+            <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
+             <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 6px;">
                  [[File:4.jpg|thumb|link=|class=not-resized|150px|center]]
              </div>
-             <div style="margin-top: 5px; font-size: 80%; color: #555; text-align: center; word-break: break-all;">توضیحات ۳</div>
+            <!-- کپشن تک‌خطی تصویر کوچک سوم -->
+             <div style="margin-top: 5px; font-size: 80%; color: #039be5; text-align: center; width: 100%;
+                        white-space: nowrap; /* جلوگیری از دوخطی شدن متن */
+                        overflow: hidden;
+                        text-overflow: ellipsis;">
+                توضیحات ۳
+            </div>
          </div>
          <!-- عکس کوچک ۴ -->
-         <div style="display: flex; flex-direction: column; align-items: center; border: 1px solid #ddd; background-color: #f9f9f9; padding: 4px; box-sizing: border-box;">
+         <div style="display: flex; flex-direction: column; align-items: center; border: 1px solid #e1f5fe; background-color: rgba(255, 255, 255, 0.9); padding: 4px; box-sizing: border-box;
-             <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center;">
+                    border-radius: 8px; /* منحنی کردن گوشه‌های کادر تصویر کوچک چهارم */">
+            <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
+             <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 6px;">
                  [[File:9.jpg|thumb|link=|class=not-resized|150px|center]]
              </div>
-             <div style="margin-top: 5px; font-size: 80%; color: #555; text-align: center; word-break: break-all;">توضیحات ۴</div>
+            <!-- کپشن تک‌خطی تصویر کوچک چهارم -->
+             <div style="margin-top: 5px; font-size: 80%; color: #039be5; text-align: center; width: 100%;
+                        white-space: nowrap; /* جلوگیری از دوخطی شدن متن */
+                        overflow: hidden;
+                        text-overflow: ellipsis;">
+                توضیحات ۴
+            </div>
          </div>