چیدمان تصاویر - فراغیب
Esfandiari (بحث | مشارکتها) بدون خلاصۀ ویرایش |
Esfandiari (بحث | مشارکتها) بدون خلاصۀ ویرایش |
||
| خط ۱۲: | خط ۱۲: | ||
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: 15px;"> | ||
[[File:3.jpg|thumb|link=|class=not-resized|350px|center]] | [[File:3.jpg|thumb|link=|class=not-resized|350px|center]] | ||
</div> | </div> | ||
| خط ۲۴: | خط ۲۴: | ||
<!-- عکس بزرگ دوم --> | <!-- عکس بزرگ دوم --> | ||
<div style="flex: 1; max-width: 480px; display: flex; flex-direction: column; align-items: center; border: 5px solid #6495ED; background-color:#F0BB78; padding: | <div style="flex: 1; max-width: 480px; display: flex; flex-direction: column; align-items: center; border: 5px solid #6495ED; background-color:#F0BB78; padding: 1px; box-sizing: border-box; | ||
border-radius: | 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: 15px;"> | ||
[[File:7.jpg|thumb|link=|class=not-resized|350px|center]] | [[File:7.jpg|thumb|link=|class=not-resized|350px|center]] | ||
</div> | </div> | ||
| خط ۴۵: | خط ۴۵: | ||
<!-- عکس کوچک ۱ --> | <!-- عکس کوچک ۱ --> | ||
<div style="display: flex; flex-direction: column; align-items: center; border: 5px solid #6495ED; background-color: #F0BB78; 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: | border-radius: 15px; /* منحنی کردن گوشههای کادر تصویر کوچک اول */"> | ||
<!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ --> | <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ --> | ||
<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: 15px;"> | ||
[[File:1.jpg|thumb|link=|class=not-resized|250px|center]] | [[File:1.jpg|thumb|link=|class=not-resized|250px|center]] | ||
</div> | </div> | ||
| خط ۶۰: | خط ۶۰: | ||
<!-- عکس کوچک ۲ --> | <!-- عکس کوچک ۲ --> | ||
<div style="display: flex; flex-direction: column; align-items: center; border: 5px solid #6495ED; background-color: #F0BB78; 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: | border-radius: 15px; /* منحنی کردن گوشههای کادر تصویر کوچک دوم */"> | ||
<!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ --> | <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ --> | ||
<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: 15px;"> | ||
[[File:22.jpg|thumb|link=|class=not-resized|250px|center]] | [[File:22.jpg|thumb|link=|class=not-resized|250px|center]] | ||
</div> | </div> | ||
| خط ۷۵: | خط ۷۵: | ||
<!-- عکس کوچک ۳ --> | <!-- عکس کوچک ۳ --> | ||
<div style="display: flex; flex-direction: column; align-items: center; border: 5px solid #6495ED; background-color: #F0BB78; 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: | border-radius: 15px; /* منحنی کردن گوشههای کادر تصویر کوچک سوم */"> | ||
<!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ --> | <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ --> | ||
<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: 15px;"> | ||
[[File:4.jpg|thumb|link=|class=not-resized|250px|center]] | [[File:4.jpg|thumb|link=|class=not-resized|250px|center]] | ||
</div> | </div> | ||
| خط ۹۰: | خط ۹۰: | ||
<!-- عکس کوچک ۴ --> | <!-- عکس کوچک ۴ --> | ||
<div style="display: flex; flex-direction: column; align-items: center; border: 5px solid #6495ED; background-color: #F0BB78; 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: | border-radius: 15px; /* منحنی کردن گوشههای کادر تصویر کوچک چهارم */"> | ||
<!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ --> | <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ --> | ||
<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: 15px;"> | ||
[[File:9.jpg|thumb|link=|class=not-resized|250px|center]] | [[File:9.jpg|thumb|link=|class=not-resized|250px|center]] | ||
</div> | </div> | ||
نسخهٔ ۷ ژوئیهٔ ۲۰۲۶، ساعت ۰۹:۴۳





