پرش به محتوا

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

از فراغیب
→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(۵۶ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<!-- کانتینر اصلی گالری - کاملاً وسط‌چین -->
<!-- شروع کانتینر اصلی گالری با پس‌زمینه آبی آسمانی ابر و بادی و چیدمان وسط‌چین -->
<div style="max-width: 1000px; margin: 0 auto; padding: 15px; direction: rtl; text-align: center;">
<div style="max-width: 1000px; margin: 0px auto; padding: 10px; direction: rtl; text-align: center;
            background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%); /* ایجاد رنگ پس‌زمینه ابر و بادی */
            border-radius: 16px; /* منحنی کردن گوشه‌های کل باکس گالری */
            box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* ایجاد سایه ملایم دور کادر */
            box-sizing: border-box;{{{style|}}};">


     <!-- ردیف اول: دو عکس بزرگ (همیشه کنار هم) -->
     <!-- ردیف اول: دو عکس بزرگ (همواره کنار هم در موبایل و دسکتاپ بدون شکستن خط) -->
     <div style="display: flex; gap: 15px; justify-content: center; margin-bottom: 20px;">
     <div style="display: flex; gap: 10px; justify-content: center; margin-bottom: 10px; width: 100%;">
          
          
         <!-- عکس بزرگ اول -->
         <!-- عکس بزرگ اول -->
         <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 1 calc(50% - 5px); max-width: 485px; min-width: 0; display: flex; flex-direction: column; align-items: center; border: 5px solid #3b82f6; background-color: #ffffff; padding: 1px; box-sizing: border-box;
             <div style="width: 100%; aspect-ratio: 4/3; overflow: hidden; display: flex; align-items: center; justify-content: center;">
                    border-radius: 15px; /* منحنی کردن گوشه‌های کادر تصویر بزرگ اول */
                 [[File:3.jpg|thumb|link=|class=not-resized|350px|center]]
{{{first big border style|}}};">
            <!-- نگهدارنده تصویر بزرگ جهت برش و هم‌ترازی با نسبت ۴:۳ -->
             <div style="width: 100%; aspect-ratio: 4/3; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 9px;{{{first big picture style|}}};">
                 [[File:{{{تصویر1}}}|thumb|link=|class=not-resized|center]]
            </div>
            <!-- کپشن تک‌خطی تصویر بزرگ اول: فونت کوچک‌شده به 75% برای سازگاری کامل موبایل -->
            <div style="margin-top: 3px; margin-bottom: 3px; font-size: 75%; color: #000000; font-weight: bold; text-align: center; width: 95%;
                        line-height: 1.1; border: none; background: transparent; box-shadow: none; outline: none;
                        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;{{{first caption big style|}}};">
توضیحات تصویر 1
             </div>
             </div>
            <div style="margin-top: 8px; font-size: 90%; color: #333; font-weight: bold; text-align: center;">توضیحات عکس بزرگ اول</div>
         </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 1 calc(50% - 5px); max-width: 485px; min-width: 0; display: flex; flex-direction: column; align-items: center; border: 5px solid #3b82f6; background-color: #ffffff; padding: 1px; box-sizing: border-box;
             <div style="width: 100%; aspect-ratio: 4/3; overflow: hidden; display: flex; align-items: center; justify-content: center;">
                    border-radius: 15px; /* منحنی کردن گوشه‌های کادر تصویر بزرگ دوم */
                 [[File:7.jpg|thumb|link=|class=not-resized|350px|center]]
{{{second big border style|}}};">
            <!-- نگهدارنده تصویر بزرگ جهت برش و هم‌ترازی با نسبت ۴:۳ -->
             <div style="width: 100%; aspect-ratio: 4/3; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 9px;{{{second big picture style|}}};">
                 [[File:{{{تصویر2}}}|thumb|link=|class=not-resized|center]]
            </div>
            <!-- کپشن تک‌خطی تصویر بزرگ دوم: فونت کوچک‌شده به 75% برای سازگاری کامل موبایل -->
            <div style="margin-top: 3px; margin-bottom: 3px; font-size: 75%; color: #000000; font-weight: bold; text-align: center; width: 95%;
                        line-height: 1.1; border: none; background: transparent; box-shadow: none; outline: none;
                        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;{{{second caption big style|}}};">
توضیحات تصویر2
             </div>
             </div>
            <div style="margin-top: 8px; font-size: 90%; color: #333; font-weight: bold; text-align: center;">توضیحات عکس بزرگ دوم</div>
         </div>
         </div>


     </div>
     </div>


     <!-- ردیف دوم: چهار عکس کوچک (همیشه و تحت هر شرایطی در یک ردیف در موبایل و دسکتاپ باقی می‌مانند) -->
     <!-- ردیف دوم: چهار عکس کوچک (همواره در یک ردیف در موبایل و دسکتاپ بدون شکستن خط) -->
     <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; justify-content: center;">
     <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; justify-content: center; width: 100%;{{{second row style|}}}">
          
          
         <!-- عکس کوچک ۱ -->
         <!-- عکس کوچک ۱ -->
         <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: 5px solid #3b82f6; background-color: #ffffff; 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: 15px; min-width: 0; /* منحنی کردن گوشه‌های کادر تصویر کوچک اول */
                 [[File:1.jpg|thumb|link=|class=not-resized|150px|center]]
{{{first small border style|}}};">
            <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
             <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 8px;{{{first small picture style|}}};">
                 [[File:{{{تصویر کوچک1}}}|thumb|link=|class=not-resized|center]]
            </div>
            <!-- کپشن تک‌خطی تصویر کوچک اول: فونت بسیار کوچک‌شده به 65% برای جلوگیری از تداخل متن -->
            <div style="margin-top: 3px; margin-bottom: 1px; font-size: 65%; color: #000000; font-weight: bold; text-align: center; width: 95%;
                        line-height: 1; border: none; background: transparent; box-shadow: none; outline: none;
                        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;{{{first small caption style|}}};">
<!-- توضیحات تصویر کوچک1-->
             </div>
             </div>
            <div style="margin-top: 5px; font-size: 80%; color: #555; text-align: center; word-break: break-all;">توضیحات ۱</div>
         </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: 5px solid #3b82f6; background-color: #ffffff; 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: 15px; min-width: 0; /* منحنی کردن گوشه‌های کادر تصویر کوچک دوم */
                 [[File:2.jpg|thumb|link=|class=not-resized|150px|center]]
{{{second small border style|}}};">
            <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
             <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 8px;{{{second small picture style|}}};">
                 [[File:{{{تصویر کوچک2}}}|thumb|link=|class=not-resized|center]]
            </div>
            <!-- کپشن تک‌خطی تصویر کوچک دوم: فونت بسیار کوچک‌شده به 65% برای جلوگیری از تداخل متن -->
            <div style="margin-top: 3px; margin-bottom: 1px; font-size: 65%; color: #000000; font-weight: bold; text-align: center; width: 95%;
                        line-height: 1; border: none; background: transparent; box-shadow: none; outline: none;
                        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;{{{second small caption style|}}};">
<!--توضیحات تصویر کوچک2-->
             </div>
             </div>
            <div style="margin-top: 5px; font-size: 80%; color: #555; text-align: center; word-break: break-all;">توضیحات ۲</div>
         </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: 5px solid #3b82f6; background-color: #ffffff; 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: 15px; min-width: 0; /* منحنی کردن گوشه‌های کادر تصویر کوچک سوم */">
                 [[File:4.jpg|thumb|link=|class=not-resized|150px|center]]
            <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
             <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 8px;">
                 [[File:{{{تصویر کوچک3}}}|thumb|link=|class=not-resized|center]]
            </div>
            <!-- کپشن تک‌خطی تصویر کوچک سوم: فونت بسیار کوچک‌شده به 65% برای جلوگیری از تداخل متن -->
            <div style="margin-top: 3px; margin-bottom: 1px; font-size: 65%; color: #000000; font-weight: bold; text-align: center; width: 95%;
                        line-height: 1; border: none; background: transparent; box-shadow: none; outline: none;
                        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
<!--توضیحات تصویر کوچک3-->
             </div>
             </div>
            <div style="margin-top: 5px; font-size: 80%; color: #555; text-align: center; word-break: break-all;">توضیحات ۳</div>
         </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: 5px solid #3b82f6; background-color: #ffffff; 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: 15px; min-width: 0; /* منحنی کردن گوشه‌های کادر تصویر کوچک چهارم */">
                 [[File:9.jpg|thumb|link=|class=not-resized|150px|center]]
            <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
             <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 8px;">
                 [[File:{{{تصویر کوچک4}}}|thumb|link=|class=not-resized|center]]
            </div>
            <!-- کپشن تک‌خطی تصویر کوچک چهارم: فونت بسیار کوچک‌شده به 65% برای جلوگیری از تداخل متن -->
            <div style="margin-top: 3px; margin-bottom: 1px; font-size: 65%; color: #000000; font-weight: bold; text-align: center; width: 95%;
                        line-height: 1; border: none; background: transparent; box-shadow: none; outline: none;
                        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
<!--توضیحات تصویر کوچک4-->
             </div>
             </div>
            <div style="margin-top: 5px; font-size: 80%; color: #555; text-align: center; word-break: break-all;">توضیحات ۴</div>
         </div>
         </div>


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

               [[File:{{{تصویر1}}}|thumb|link=|class=not-resized|center]]

توضیحات تصویر 1 

               [[File:{{{تصویر2}}}|thumb|link=|class=not-resized|center]]

توضیحات تصویر2 

               [[File:{{{تصویر کوچک1}}}|thumb|link=|class=not-resized|center]]

               [[File:{{{تصویر کوچک2}}}|thumb|link=|class=not-resized|center]]

               [[File:{{{تصویر کوچک3}}}|thumb|link=|class=not-resized|center]]

               [[File:{{{تصویر کوچک4}}}|thumb|link=|class=not-resized|center]]
برگرفته از «https://fa.faraghaib.ir/w/index.php?title=الگو:چیدمان_تصاویر&oldid=2523»