تصاویر واکنش گرا یا ریسپانسیو، به تصاویری گفته می‌شود که به درستی در صفحاتی با سایزهای متفاوت، به نمایش در می‌آیند. این درستی نمایش شامل فاکتورهای مختلفی مثل رزولوشن و مکان (position) نیز می‌شود. از آن‌جایی که اکثر وب‌سایت‌ها واکنش گرا هستند، شما باید از قرار دادن تصاویر ایستا و استاتیک درون صحفات وبتان، پرهیز کنید.
اضافه کردن تصاویر واکنش گرا با استفاده از CSS
یک طراحی واکنشگرا برای وبسایت، طراحی‌ای است که با تغییر سایز و ابعاد پنجره و صفحه نمایش، تصویر کیفیت خود را از دست نمی‌دهد. تصاویر در این نوع طراحی به شکلی واکنشگرا عرض‌شان باتوجه به ابعاد صفحه نمایش کاربر، تغییر کرده.
سه روش متفاوت برای استایل دهی به تصاویر پس‌زمینه در CSS وجود دارد. شما می‌توانید از تصاویر مختلفی با توجه به سایز صفحه نمایش دستگاه کاربر، استفاده کنید.
تعیین عرض برای مقیاس پذیری (scaling)
تصاویر در CSS با توجه به دو بعد (عرض و ارتفاع) پنجره‌ی مرورگر، می‌توانند تغییر سایز بدهند. شما باید مقدار پراپرتی width یا max-width برای این‌که تصاویری واکنشگرا داشته باشید، تعیین کنید.
می‌توان با تعیین مقدار 100% برای width بزرگ و کوچک شدن تصاویر بدون افت کیفیت آن‌ها را با توجه به عرض صفحه نمایش دستگاه یا عرض پنچره‌ی مرورگر مخاطب، فعال کنید.
img {
width: 100%;
height: auto;
}در مثال بالا، تصویر شما میتواند حتی بزرگ تر از تصویر اصلی بشود؛ نتیجتاً ممکن است تصاویرتان با افت کیفیت بر روی صفحه نمایش‌های بزرگ، روبرو شوند.
برای جلوگیری از این اتفاق می‌توانید به جای تعیین مقدار width بر روی 100% مقدار max-width را بر روی 100% بگذارید تا اندازه‌ی تصویر شما از اندازه‌ی ابعاد اصلی آن، بزرگتر نشود.
img {
max-width: 100%;
height: auto;
}تخصیص مقدار به background-size برای مناسب صفحه شدن
با استفاده از CSS می‌توان پراپرتی background-size را تعیین کرد تا در نهایت تصویری مناسب در صفحه نمایش داشته باشیم.
این پراپرتی یک مقدار cover دارد که مرورگر را مجبور به متناسب کردن تصویر پس‌زمینه و تغییر دادن عرض و ارتفاع آن برای داشتن تصویری هم‌اندازه یا بزرگتر از صفحه نمایش، می‌کند.
در مثال زیر می‌توانیم تصویر پس‌زمینه را متناسب با صفحه تنظیم کنیم:
html {
background: url('image.png') no-repeat center fixed;
background-size: cover;
}- تصویر پس‌زمینه‌ی واکنش گرا تمام صفحه را بدون گذاشتن مکانی خالی، پر می‌کند.
- تصویر در مرکز صفحه قرار می‌گیرد و اگر نیاز به تغییر ابعاد داشته باشد، این کار را انجام می‌دهد. هیچ اسکرول باری نیز نیاز نخواهد داشت.
حفظ نسبت ابعاد (aspect ratio)
این گزینه برای زمانی مناسب است که تصویر شما، تصویری کوچک است و سعی دارید که کیفیت آن را از دست ندهید.
پراپرتی background-size را بر روی contain تنظیم کنید. این کار باعث می‌شود که مرورگر کاربر، سعی در حفظ ابعاد تصویر شما در محدوده‌ای که قرار گرفته است، بکند و تصویر شما بدون دفورمه شدن و از دست دادن نسبت ابعاد اصلی خود، بزرگ یا کوچک می‌شود. پس تصویری واکنش گرا و در عین حال با کیفیت اصلی آن را دارا خواهید بود.
div {
width: 100%;
height: 300px;
background-image: url('doggo.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 2px solid #e9385a;
}کشیده کردن تصاویر برای پر شدن محدوده
ما می‌توانیم مقدار پراپرتی background-size را بر روی 100% 100% قرار دهیم تا تصویرمان تمام محدوده مورد نظرش را چه در عرض و چه در ارتفاع، پر کند.
div {
width: 100%;
height: 300px;
background-image: url('doggo.jpg');
background-size: 100% 100%;
border: 2px solid #e9385a;
}کل محدوده را پوشش دهید اما نسبت ابعاد را نیز حفظ کنید
برای پر کردن محدوده‌ی مورد نظرتان با استفاده از تصویر پس‌زمینه و همچنین حفظ aspect ratio می‌توانید از مقدار cover برای پراپرتی background-size استفاده کنید. این قابلیت ممکن است بخشی از تصویر شما را به شکلی بریده برای جایگذاری رد محدوده‌ی مورد نظر و پر کردن تمام ابعاد آن، انتخاب کند.
div {
width: 100%;
height: 300px;
background-image: url('doggo.jpg');
background-size: cover;
border: 2px solid #e3985a;
}تصاویر واکنش گرا و مدیا کوئری‌ها
تصاویر بزرگ وقتی در صفحات نمایش کوچک قرار بگیرند، تجربه کاربر را بدتر از پیش نیز می‌کنند. چرا که سرعت لود شدن صفحه، بسیار افت می‌کند.
به همین دلیل، ما از مدیا کوئری‌ها برای ایجاد نمایشی متفاوت برای تصاویر در صفحه نمایش‌هایی با سایزهای مختلف، استفاده می‌کنیم.
در مثال زیر ما دو تصویر داریم؛ یکی در سایز بزرگ و دیگری کوچک. CSS آن تصویری را انتخاب می‌کند که بهترین تناسب را با صفحه نمایش کاربر دارد. این کار از طریق مدیا کوئری‌های سی اس اس انجام می‌گیرد.
/* For screens with width smaller than 400px */
body {
background-image: url('small-birb.jpg');
}
/* For larger screens */
@media only screen and (min-width: 400px) {
body {
background-image: url('birb.jpg');
}
}به جای min-width می‌توانیم در مدیا کوئری، از min-device-width استفاده کنیم. اگر این کار را بکنیم، مدیا کوئری‌ها با توجه به عرض صفحه نمایش دستگاه‌های مختلف، کار خواهد کرد.
در نتیجه اگر این کار را بکنید، با تغییر عرض پنچره‌ی مرورگر، تغییرات مدیا کوئری‌ها اعمال نخواهد شد و این اتفاق تنها زمانی که دستگاه مورد استفاده‌تان را تغییر دهید، رخ می‌دهد.
/* For devices with width smaller than 400px */
body {
background-image: url('birb-small.jpg');
}
/* For larger devices */
@media only screen and (min-device-width: 400px) {
body {
background-image: url('birb.jpg');
}
}المنت <picture> در HTML5
این المنت در HTML5 برای اولین‌بار معرفی شد و برای تعریف کردن دو یا چند تصویر به شکل هم‌زمان به کار می‌رود.
فقط به یاد داشته باشید که المنت <picture> گزینه‌های مختلفی را برای نمایش تصویر، در اختیار مرورگر قرار می‌دهد تا اگر هرکدام از آن‌ها نتوانستند لود شوند، دیگری لود شود. علاوه بر این می‌توانید برای واکنش‌پذیری تصویر نیز با استفاده از اتریبیوت media این کار را انجام دهید.
<picture>
<source srcset="birb-small.jpg" media="(max-width: 400px)">
<source srcset="doggo.jpg">
<img src="doggo.jpg" alt="cannot display">
</picture>شما در مثال بالا باید اتریبیوت srcset را به عنوان منبع تصویرتان، مشخص کنید. شما می‌توانید هر تعداد منبعی که دوست دارید، تعریف کنید. اما به خاطر داشته باشید که ترتیب قرار دادن این المنت‌های تصاویر، مهم است و براساس این ترتیب، اولین تصویر قابل نمایش، به کاربر نشان داده می‌شود.
اتریبیت media اجباری نیست؛ ولی می‌توانید از آن برای قرار دادن مدیا کوئری‌های دلخواه‌تان، استفاده کنید. علاوه بر این برای سازگاری این المنت در مرورگرهای قدیمی، باید المنت <img> را قرار دهید؛ چرا که این مرورگرها از تگ <picture> پشتیبانی نمی‌کنند.
نکته‌ی کاربری
علاه بر موارد گفته شده تا به اینجا، اگر شما از Bootstrap استفاده می‌کنید، باید گفت که می‌توانید با استفاده از کلاس .img-fluid تصاویر خود را واکنش‌پذیر کرده؛ کاری که در Bootstrap 3 با استفاده از کلاس img-responsive امکان‌پذیر بود.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید