چیدمان تصاویر - فراغیب
Esfandiari (بحث | مشارکتها) بدون خلاصۀ ویرایش |
Esfandiari (بحث | مشارکتها) بدون خلاصۀ ویرایش |
||
| خط ۱۱: | خط ۱۱: | ||
<!-- عکس بزرگ اول --> | <!-- عکس بزرگ اول --> | ||
<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="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; | ||
border-radius: 15px; /* منحنی کردن گوشههای کادر تصویر بزرگ اول */"> | border-radius: 15px; /* منحنی کردن گوشههای کادر تصویر بزرگ اول */ | ||
{{{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;"> | <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]] | [[File:{{{تصویر1}}}|thumb|link=|class=not-resized|center]] | ||
</div> | </div> | ||
| خط ۱۹: | خط ۲۰: | ||
<div style="margin-top: 3px; margin-bottom: 3px; font-size: 75%; color: #000000; font-weight: bold; text-align: center; width: 95%; | <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; | 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;{{{first caption big style|}}};"> | ||
توضیحات تصویر 1 | توضیحات تصویر 1 | ||
</div> | </div> | ||
| خط ۲۶: | خط ۲۷: | ||
<!-- عکس بزرگ دوم --> | <!-- عکس بزرگ دوم --> | ||
<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="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; | ||
border-radius: 15px; /* منحنی کردن گوشههای کادر تصویر بزرگ دوم */"> | border-radius: 15px; /* منحنی کردن گوشههای کادر تصویر بزرگ دوم */ | ||
{{{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;"> | <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]] | [[File:{{{تصویر2}}}|thumb|link=|class=not-resized|center]] | ||
</div> | </div> | ||
| خط ۳۴: | خط ۳۶: | ||
<div style="margin-top: 3px; margin-bottom: 3px; font-size: 75%; color: #000000; font-weight: bold; text-align: center; width: 95%; | <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; | 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;{{{second caption big style|}}};"> | ||
توضیحات تصویر2 | توضیحات تصویر2 | ||
</div> | </div> | ||
| خط ۴۲: | خط ۴۴: | ||
<!-- ردیف دوم: چهار عکس کوچک (همواره در یک ردیف در موبایل و دسکتاپ بدون شکستن خط) --> | <!-- ردیف دوم: چهار عکس کوچک (همواره در یک ردیف در موبایل و دسکتاپ بدون شکستن خط) --> | ||
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; justify-content: center; width: 100%;"> | <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: 5px solid #3b82f6; background-color: #ffffff; 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; | ||
border-radius: 15px; min-width: 0; /* منحنی کردن گوشههای کادر تصویر کوچک اول */"> | border-radius: 15px; min-width: 0; /* منحنی کردن گوشههای کادر تصویر کوچک اول */ | ||
{{{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;"> | <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]] | [[File:{{{تصویر کوچک1}}}|thumb|link=|class=not-resized|center]] | ||
</div> | </div> | ||
| خط ۵۴: | خط ۵۷: | ||
<div style="margin-top: 3px; margin-bottom: 1px; font-size: 65%; color: #000000; font-weight: bold; text-align: center; width: 95%; | <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; | line-height: 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;{{{first small caption style|}}};"> | ||
<!-- توضیحات تصویر کوچک1--> | <!-- توضیحات تصویر کوچک1--> | ||
</div> | </div> | ||
| خط ۶۱: | خط ۶۴: | ||
<!-- عکس کوچک ۲ --> | <!-- عکس کوچک ۲ --> | ||
<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="display: flex; flex-direction: column; align-items: center; border: 5px solid #3b82f6; background-color: #ffffff; padding: 4px; box-sizing: border-box; | ||
border-radius: 15px; min-width: 0; /* منحنی کردن گوشههای کادر تصویر کوچک دوم */"> | border-radius: 15px; min-width: 0; /* منحنی کردن گوشههای کادر تصویر کوچک دوم */ | ||
{{{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;"> | <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]] | [[File:{{{تصویر کوچک2}}}|thumb|link=|class=not-resized|center]] | ||
</div> | </div> | ||
| خط ۶۹: | خط ۷۳: | ||
<div style="margin-top: 3px; margin-bottom: 1px; font-size: 65%; color: #000000; font-weight: bold; text-align: center; width: 95%; | <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; | line-height: 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;{{{second small caption style|}}};"> | ||
<!--توضیحات تصویر کوچک2--> | <!--توضیحات تصویر کوچک2--> | ||
</div> | </div> | ||