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

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

دیداریویکی‌متن

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

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

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

توضیحات ۱

توضیحات ۲

توضیحات ۳

توضیحات ۴

@@ خط ۱: / خط ۱: @@
-<center>
+<!-- کانتینر اصلی گالری - کاملاً وسط‌چین -->
-{| class="wikitable" style="border-collapse: separate; border-spacing: 10px; margin: 0 auto; border:0; background:none;"
+<div style="max-width: 1000px; margin: 0 auto; padding: 15px; direction: rtl; text-align: center;">
-|-
-| style="text-align: center; border:0;" | [[پرونده:3.jpg|250px]]
+    <!-- ردیف اول: دو عکس بزرگ (همیشه کنار هم) -->
-| style="text-align: center; border:0;" | [[پرونده:7.jpg|250px]]
+    <div style="display: flex; gap: 15px; justify-content: center; margin-bottom: 20px;">
-|-
-| style="text-align: center; border:0;" | [[پرونده:1.jpg|150px]]
+        <!-- عکس بزرگ اول -->
-| style="text-align: center; border:0;" | [[پرونده:2.jpg|150px]]
+        <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;">
-| style="text-align: center; border:0;" | [[پرونده:4.jpg|150px]]
+            <div style="width: 100%; aspect-ratio: 4/3; overflow: hidden; display: flex; align-items: center; justify-content: center;">
-| style="text-align: center; border:0;" | [[پرونده:9.jpg|150px]]
+                [[File:3.jpg|thumb|link=|class=not-resized|350px|center]]
-|}
+            </div>
-</center>
+            <div style="margin-top: 8px; font-size: 90%; color: #333; font-weight: bold; text-align: center;">توضیحات عکس بزرگ اول</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="width: 100%; aspect-ratio: 4/3; overflow: hidden; display: flex; align-items: center; justify-content: center;">
+                [[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>
+    </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="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center;">
+                [[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>
+        <!-- عکس کوچک ۲ -->
+        <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="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center;">
+                [[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>
+        <!-- عکس کوچک ۳ -->
+        <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="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center;">
+                [[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>
+        <!-- عکس کوچک ۴ -->
+        <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="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center;">
+                [[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>
+    </div>
+</div>