تصاویر واکنش گرا (RWD Images)
«تصاویر واکنش گرا (Responsive Images)» باعث می شوند عکس ها در همه نمایشگرها درست مقیاس شوند. بنابراین با CSS می توان پهنا و نسبت تصویر را کنترل کرد و تجربه کاربری بهتری ساخت.
استفاده از width و height:auto
اگر width را درصدی و height را auto بگذارید، تصویر با ظرف خود کوچک و بزرگ می شود.
img { width: 100%; height: auto; }هشدار: این روش می تواند تصویر را از اندازه اصلی بزرگ تر کند. در بسیاری موارد بهتر است از max-width استفاده کنید.
استفاده از max-width
با max-width:100% تصویر فقط کوچک می شود و هرگز از اندازه اصلی بزرگ تر نخواهد شد.
img { max-width: 100%; height: auto; }افزودن تصویر به صفحه نمونه
برای تطبیق سریع با چیدمان، همان الگوی درصدی را به کار ببرید.
img { width: 100%; height: auto; }تصاویر پس زمینه و background-size
پس زمینه نیز می تواند واکنش گرا باشد. سه الگوی رایج عبارت اند از contain، کشیدن کامل، و cover.
الگوی contain
div { width: 100%; height: 400px; background-image: url('img_flowers.jpg'); background-repeat: no-repeat; background-size: contain; border: 1px solid red; }کشیدن 100% 100%
div { width: 100%; height: 400px; background-image: url('img_flowers.jpg'); background-size: 100% 100%; border: 1px solid red; }الگوی cover
div { width: 100%; height: 400px; background-image: url('img_flowers.jpg'); background-size: cover; border: 1px solid red; }نکته: مقدار cover نسبت تصویر را حفظ می کند؛ ممکن است بخشی از تصویر بریده شود.
تصاویر متفاوت برای دستگاه های متفاوت
برای کاهش ترافیک و بهبود سرعت، با «کوئری های رسانه ای» تصویر مناسب هر بازه عرضی را بارگذاری کنید.
/* کوچک تر از 400px */
body { background-image: url('img_smallflower.jpg'); }
/* 400px و بزرگ تر */
@media only screen and (min-width: 400px) { body { background-image: url('img_flowers.jpg'); } }می توانید به جای min-width از min-device-width استفاده کنید تا اندازه دستگاه بررسی شود و با تغییر اندازه مرورگر، تصویر عوض نشود.
/* دستگاه های کوچک تر از 400px */
body { background-image: url('img_smallflower.jpg'); }
/* دستگاه های 400px و بزرگ تر */
@media only screen and (min-device-width: 400px) { body { background-image: url('img_flowers.jpg'); } }عنصر HTML <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>نکته: یک تگ <img> به عنوان پشتیبان برای مرورگرهای قدیمی بگذارید. همچنین پیش از هر چیز، ویوپورت واکنش گرا را تنظیم کنید.
مطالعه بیشتر و مسیر یادگیری
برای مدیریت شرایط نمایش، از کوئری های رسانه ای کمک بگیرید. افزون براین، درباره تصاویر واکنش گرا نیز می توانید بیشتر بخوانید و الگوهای خود را کامل کنید.
برای جزئیات کامل، مستند MDN: background-size و راهنمای MDN: <picture> را ببینید.