پرش به محتوا

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

از فراغیب
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۹: خط ۹:
          
          
         <!-- عکس بزرگ اول -->
         <!-- عکس بزرگ اول -->
         <div style="flex: 1; max-width: 480px; display: flex; flex-direction: column; align-items: center; border: 5px solid #0B8452; background-color:#Fc6600; padding: 5px; box-sizing: border-box;  
         <div style="flex: 1; max-width: 480px; display: flex; flex-direction: column; align-items: center; border: 5px solid #6495ED; background-color:#F0BB78; padding: 5px; box-sizing: border-box;  
                     border-radius: 15px; /* منحنی کردن گوشه‌های کادر تصویر بزرگ اول */">
                     border-radius: 15px; /* منحنی کردن گوشه‌های کادر تصویر بزرگ اول */">
             <!-- نگهدارنده تصویر بزرگ جهت برش و هم‌ترازی با نسبت ۴:۳ -->
             <!-- نگهدارنده تصویر بزرگ جهت برش و هم‌ترازی با نسبت ۴:۳ -->
خط ۱۶: خط ۱۶:
             </div>
             </div>
             <!-- کپشن تک‌خطی تصویر بزرگ اول: وسط‌چین، بدون کادر، با فاصله کمتر -->
             <!-- کپشن تک‌خطی تصویر بزرگ اول: وسط‌چین، بدون کادر، با فاصله کمتر -->
             <div style="margin-top: 15px; font-size: 70%; color: #000000; font-weight: bold; text-align: center; width: 100%;
             <div style="margin-top: 15px; font-size: 70%; color: #000000; font-weight: bold; text-align: center; width: 50%;
                         line-height: 2; border: none; background: transparent; box-shadow: none; outline: none;
                         line-height: 2; border: none; background: transparent; box-shadow: none; outline: none;
                         white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                         white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
خط ۲۴: خط ۲۴:


         <!-- عکس بزرگ دوم -->
         <!-- عکس بزرگ دوم -->
         <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="flex: 1; max-width: 480px; display: flex; flex-direction: column; align-items: center; border: 5px solid #6495ED; background-color:#F0BB78; padding: 5px; box-sizing: border-box;  
                     border-radius: 12px; /* منحنی کردن گوشه‌های کادر تصویر بزرگ دوم */">
                     border-radius: 12px; /* منحنی کردن گوشه‌های کادر تصویر بزرگ دوم */">
             <!-- نگهدارنده تصویر بزرگ جهت برش و هم‌ترازی با نسبت ۴:۳ -->
             <!-- نگهدارنده تصویر بزرگ جهت برش و هم‌ترازی با نسبت ۴:۳ -->
خط ۴۴: خط ۴۴:
          
          
         <!-- عکس کوچک ۱ -->
         <!-- عکس کوچک ۱ -->
         <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="display: flex; flex-direction: column; align-items: center; border: 5px solid #6495ED; background-color: #F0BB78; padding: 4px; box-sizing: border-box;  
                     border-radius: 8px; /* منحنی کردن گوشه‌های کادر تصویر کوچک اول */">
                     border-radius: 8px; /* منحنی کردن گوشه‌های کادر تصویر کوچک اول */">
             <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
             <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
خط ۵۹: خط ۵۹:


         <!-- عکس کوچک ۲ -->
         <!-- عکس کوچک ۲ -->
         <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="display: flex; flex-direction: column; align-items: center; border: 5px solid #6495ED; background-color: #F0BB78; padding: 4px; box-sizing: border-box;  
                     border-radius: 8px; /* منحنی کردن گوشه‌های کادر تصویر کوچک دوم */">
                     border-radius: 8px; /* منحنی کردن گوشه‌های کادر تصویر کوچک دوم */">
             <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
             <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
خط ۷۴: خط ۷۴:


         <!-- عکس کوچک ۳ -->
         <!-- عکس کوچک ۳ -->
         <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="display: flex; flex-direction: column; align-items: center; border: 5px solid #6495ED; background-color: #F0BB78; padding: 4px; box-sizing: border-box;  
                     border-radius: 8px; /* منحنی کردن گوشه‌های کادر تصویر کوچک سوم */">
                     border-radius: 8px; /* منحنی کردن گوشه‌های کادر تصویر کوچک سوم */">
             <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
             <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
خط ۸۹: خط ۸۹:


         <!-- عکس کوچک ۴ -->
         <!-- عکس کوچک ۴ -->
        <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="display: flex; flex-direction: column; align-items: center; border: 5px solid #6495ED; background-color: #F0BB78; padding: 4px; box-sizing: border-box;  
                     border-radius: 8px; /* منحنی کردن گوشه‌های کادر تصویر کوچک چهارم */">
                     border-radius: 8px; /* منحنی کردن گوشه‌های کادر تصویر کوچک چهارم */">
             <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
             <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->

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

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

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

توضیحات ۱

توضیحات ۲

توضیحات ۳

توضیحات ۴