چیدمان تصاویر - فراغیب
Esfandiari (بحث | مشارکتها) بدون خلاصۀ ویرایش |
Esfandiari (بحث | مشارکتها) بدون خلاصۀ ویرایش |
||
| خط ۳: | خط ۳: | ||
background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #f0f9ff 100%); /* ایجاد رنگ پسزمینه ابر و بادی */ | background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #f0f9ff 100%); /* ایجاد رنگ پسزمینه ابر و بادی */ | ||
border-radius: 16px; /* منحنی کردن گوشههای کل باکس گالری */ | border-radius: 16px; /* منحنی کردن گوشههای کل باکس گالری */ | ||
box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* ایجاد سایه ملایم دور کادر */"> | box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* ایجاد سایه ملایم دور کادر */ | ||
box-sizing: border-box;"> | |||
<!-- ردیف اول: دو عکس بزرگ (همواره کنار هم در موبایل و دسکتاپ) --> | <!-- ردیف اول: دو عکس بزرگ (همواره کنار هم در موبایل و دسکتاپ بدون شکستن خط) --> | ||
<div style="display: flex; gap: 10px; justify-content: center; margin-bottom: | <div style="display: flex; gap: 10px; justify-content: center; margin-bottom: 10px; width: 100%;"> | ||
<!-- عکس بزرگ اول --> | <!-- عکس بزرگ اول --> | ||
<div style="flex: 1; max-width: | <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 #7ED957; background-color: #2A9D8F; padding: 1px; box-sizing: border-box; | ||
border-radius: 15px; /* منحنی کردن گوشههای کادر تصویر بزرگ اول */"> | border-radius: 15px; /* منحنی کردن گوشههای کادر تصویر بزرگ اول */"> | ||
<!-- نگهدارنده تصویر بزرگ جهت برش و همترازی با نسبت ۴:۳ --> | <!-- نگهدارنده تصویر بزرگ جهت برش و همترازی با نسبت ۴:۳ --> | ||
<div style="width: 100%; aspect-ratio: 4/3; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: | <div style="width: 100%; aspect-ratio: 4/3; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 9px;"> | ||
[[File:3.jpg|thumb|link=|class=not-resized | [[File:3.jpg|thumb|link=|class=not-resized|center]] | ||
</div> | </div> | ||
<!-- کپشن تکخطی تصویر بزرگ اول: وسطچین، بدون کادر، با فاصله کمتر --> | <!-- کپشن تکخطی تصویر بزرگ اول: وسطچین، بدون کادر، با فاصله کمتر --> | ||
<div style="margin-top: | <div style="margin-top: 4px; margin-bottom: 4px; font-size: 90%; color: #000000; font-weight: bold; text-align: center; width: 100%; | ||
line-height: 2; border: none; background: transparent; box-shadow: none; outline: none; | line-height: 1.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> | </div> | ||
</div> | </div> | ||
<!-- عکس بزرگ دوم --> | <!-- عکس بزرگ دوم --> | ||
<div style="flex: 1; max-width: | <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 #7ED957; background-color: #2A9D8F; padding: 1px; box-sizing: border-box; | ||
border-radius: 15px; /* منحنی کردن گوشههای کادر تصویر بزرگ دوم */"> | border-radius: 15px; /* منحنی کردن گوشههای کادر تصویر بزرگ دوم */"> | ||
<!-- نگهدارنده تصویر بزرگ جهت برش و همترازی با نسبت ۴:۳ --> | <!-- نگهدارنده تصویر بزرگ جهت برش و همترازی با نسبت ۴:۳ --> | ||
<div style="width: 100%; aspect-ratio: 4/3; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: | <div style="width: 100%; aspect-ratio: 4/3; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 9px;"> | ||
[[File:7.jpg|thumb|link=|class=not-resized | [[File:7.jpg|thumb|link=|class=not-resized|center]] | ||
</div> | </div> | ||
<!-- کپشن تکخطی تصویر بزرگ دوم: وسطچین، بدون کادر، با فاصله کمتر --> | <!-- کپشن تکخطی تصویر بزرگ دوم: وسطچین، بدون کادر، با فاصله کمتر --> | ||
<div style="margin-top: | <div style="margin-top: 4px; margin-bottom: 4px; font-size: 90%; color: #000000; font-weight: bold; text-align: center; width: 100%; | ||
line-height: 2; border: none; background: transparent; box-shadow: none; outline: none; | line-height: 1.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> | </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%;"> | ||
<!-- عکس کوچک ۱ --> | <!-- عکس کوچک ۱ --> | ||
<div style="display: flex; flex-direction: column; align-items: center; border: 5px solid #7ED957; background-color: #2A9D8F; padding: 4px; box-sizing: border-box; | <div style="display: flex; flex-direction: column; align-items: center; border: 5px solid #7ED957; background-color: #2A9D8F; padding: 4px; box-sizing: border-box; | ||
border-radius: 15px; /* منحنی کردن گوشههای کادر تصویر کوچک اول */"> | border-radius: 15px; min-width: 0; /* منحنی کردن گوشههای کادر تصویر کوچک اول */"> | ||
<!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ --> | <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ --> | ||
<div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: | <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 8px;"> | ||
[[File:1.jpg|thumb|link=|class=not-resized | [[File:1.jpg|thumb|link=|class=not-resized|center]] | ||
</div> | </div> | ||
<!-- کپشن تکخطی تصویر کوچک اول | <!-- کپشن تکخطی تصویر کوچک اول --> | ||
<div style="margin-bottom: 1px; font-size: 80%; color: #000000; text-align: center; width: 100%; | <div style="margin-top: 4px; margin-bottom: 1px; font-size: 80%; color: #000000; text-align: center; width: 100%; | ||
line-height: 1.1; border: none; background: transparent; box-shadow: none; outline: none; | line-height: 1.1; 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="display: flex; flex-direction: column; align-items: center; border: 5px solid #7ED957; background-color: #2A9D8F; padding: 4px; box-sizing: border-box; | <div style="display: flex; flex-direction: column; align-items: center; border: 5px solid #7ED957; background-color: #2A9D8F; padding: 4px; box-sizing: border-box; | ||
border-radius: 15px; /* منحنی کردن گوشههای کادر تصویر کوچک دوم */"> | border-radius: 15px; min-width: 0; /* منحنی کردن گوشههای کادر تصویر کوچک دوم */"> | ||
<!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ --> | <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ --> | ||
<div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: | <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 8px;"> | ||
[[File:22.jpg|thumb|link=|class=not-resized | [[File:22.jpg|thumb|link=|class=not-resized|center]] | ||
</div> | </div> | ||
<!-- کپشن تکخطی تصویر کوچک دوم | <!-- کپشن تکخطی تصویر کوچک دوم --> | ||
<div style="margin-bottom: 1px; font-size: 80%; color: #000000; text-align: center; width: 100%; | <div style="margin-top: 4px; margin-bottom: 1px; font-size: 80%; color: #000000; text-align: center; width: 100%; | ||
line-height: 1.1; border: none; background: transparent; box-shadow: none; outline: none; | line-height: 1.1; 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="display: flex; flex-direction: column; align-items: center; border: 5px solid #7ED957; background-color: #2A9D8F; padding: 4px; box-sizing: border-box; | <div style="display: flex; flex-direction: column; align-items: center; border: 5px solid #7ED957; background-color: #2A9D8F; padding: 4px; box-sizing: border-box; | ||
border-radius: 15px; /* منحنی کردن گوشههای کادر تصویر کوچک سوم */"> | border-radius: 15px; min-width: 0; /* منحنی کردن گوشههای کادر تصویر کوچک سوم */"> | ||
<!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ --> | <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ --> | ||
<div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: | <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 8px;"> | ||
[[File:4.jpg|thumb|link=|class=not-resized | [[File:4.jpg|thumb|link=|class=not-resized|center]] | ||
</div> | </div> | ||
<!-- کپشن تکخطی تصویر کوچک سوم | <!-- کپشن تکخطی تصویر کوچک سوم --> | ||
<div style="margin-bottom: 1px; font-size: 80%; color: #000000; text-align: center; width: 100%; | <div style="margin-top: 4px; margin-bottom: 1px; font-size: 80%; color: #000000; text-align: center; width: 100%; | ||
line-height: 1.1; border: none; background: transparent; box-shadow: none; outline: none; | line-height: 1.1; 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="display: flex; flex-direction: column; align-items: center; border: 5px solid #7ED957; background-color: #2A9D8F; padding: 4px; box-sizing: border-box; | |||
border-radius: 15px; /* منحنی کردن گوشههای کادر تصویر کوچک چهارم */"> | border-radius: 15px; min-width: 0; /* منحنی کردن گوشههای کادر تصویر کوچک چهارم */"> | ||
<!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ --> | <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ --> | ||
<div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: | <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 8px;"> | ||
[[File:9.jpg|thumb|link=|class=not-resized | [[File:9.jpg|thumb|link=|class=not-resized|center]] | ||
</div> | </div> | ||
<!-- کپشن تکخطی تصویر کوچک چهارم | <!-- کپشن تکخطی تصویر کوچک چهارم --> | ||
<div style="margin-bottom: 1px; font-size: 80%; color: #000000; text-align: center; width: 100%; | <div style="margin-top: 4px; margin-bottom: 1px; font-size: 80%; color: #000000; text-align: center; width: 100%; | ||
line-height: 1.1; border: none; background: transparent; box-shadow: none; outline: none; | line-height: 1.1; 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;"> | ||
نسخهٔ ۷ ژوئیهٔ ۲۰۲۶، ساعت ۱۲:۳۲
