تصاویر واکنش گرا (RWD Images)
«تصویر واکنش گرا (Responsive Image)» یعنی عکس با اندازه صفحه هماهنگ شود. بنابراین روی موبایل کوچک می شود و روی دسکتاپ جا می گیرد. نسبت تصویر یعنی رابطه عرض و ارتفاع.
روش width: 100% و height: auto
این روش تصویر را با عرض ظرف کش می دهد. سپس ارتفاع خودکار می ماند.
<style>
img {
width: 100%;
height: auto;
}
</style>
روش بهتر: max-width: 100%
با max-width تصویر کوچک می شود، اما بزرگ تر از اصل نمی شود.
<style>
img {
max-width: 100%;
height: auto;
}
</style>
افزودن تصویر به نمونه صفحه
این هم نسخه ساده برای همان نمونه تمرینی.
<style>
img {
width: 100%;
height: auto;
}
</style>
پس زمینه واکنش گرا با background-size
سه روش رایج داریم: contain، کشش کامل، و cover. هر کدام رفتار متفاوتی دارد.
contain: جا شدن کامل با حفظ نسبت
<style>
div.bg {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid black;
}
</style>
100% 100%: کشش کامل در هر دو بُعد
<style>
div.bg {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid black;
}
</style>
cover: پوشش کامل با احتمال برش
<style>
div.bg {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid black;
}
</style>
عکس های متفاوت برای دستگاه های متفاوت
با media query می توان برای عرض های مختلف، تصویر مناسب بارگذاری کرد.
<style>
/* کمتر از 400px */
body {
background-image: url('img_smallflower.jpg');
}
/* 400px و بیشتر */
@media only screen and (min-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}
</style>
عنصر <picture> برای تصاویر واکنش گرا
عنصر «picture» چند منبع تعریف می کند. مرورگر بهترین را انتخاب می کند.
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 400px)">
<source srcset="img_flowers.jpg">
<img src="img_flowers.jpg" alt="Flowers">
</picture>
گالری تصویر واکنش گرا (Flex + Media Query)
در نمونه مرجع، با Flexbox و breakpoint ها گالری ساخته شده است. اجرای زنده را در ادیتور ببین.
گام های عملی
- برای img از max-width: 100% استفاده کن.
- پس زمینه را با contain یا cover تنظیم کن.
- برای عرض های مختلف، media query بنویس.
- برای کنترل پیشرفته، از picture استفاده کن.
نکته: همیشه متن جایگزین مناسب بنویس. این برای دسترس پذیری ضروری است.
جمع بندی سریع
- max-width بهتر از width خالی است.
- contain نمی بُرد، cover ممکن است ببُرد.
- media query تصویر مناسب بارگذاری می کند.
- picture انعطاف بالاتری می دهد.
ادامه یادگیری: پرس وجوهای رسانه ای، چیدمان شبکه واکنش گرا، و نما (Viewport). برای «تصاویر واکنش گرا» بیشتر جستجو کن.