هدف از طراحی واکنشگرا ایجاد صفحاتی پویا و هوشمند می باشد که بسته به اندازه صفحه نمایشگر خروجی مناسبی را از محتوای سایت به نمایش گذارند. امروزه نمایشگرها محدوده وسیعی را از تلفن های همراه تا مانیتور های عریض شامل می شوند، یکی از دغدغه های طراحی به صورت واکنشگرا بدون شک ارائه نمایشی انعطاف پذیر از تصاویر خواهد بود.
راه کارهای گوناگونی در این زمینه وجود دارند که هریک دارای مزایا و معایبی می باشند و اتخاذ راه حل مناسب بسته به نیاز و شرایط عملکرد شما و وب سایت مورد نظر خواهد بود . در این مطلب به معرفی برخی از این راه کارها می پردازیم.
کلیات
تنظیم تصاویر به شکلی که عرض تگ در برگیرنده خود را اتخاذ نماید کار ساده ای به نظر می رسد به عنوان مثال می توانید عرض تصویر را در شیوه نامه اصی یا شیوه نامه Normalize پوسته خود به شکل زیر تعریف نمایید :
|
|
<div class="img-container">
<img src="logo.png"/>
</div>
<style>
img {
max-width: 100%;
}
</style>
|
در بیشتر موارد تعریف فوق به درستی عمل خواهد کرد بدین صورت که با کاهش عرض صفحه، کلاس img-container باریکتر خواهد شد و در نقطه ای که عرض این کلاس از عرض تصویر logo.png کمتر شود عرض تصویر را به اجبار کاهش خواهد داد . در حقیقت با تعریف max-width و اختصاص مقدار ۱۰۰% به آن عرض تصویر وابسته به عرض کلاس احاطه کننده تصویر (img-container) شده و با کاهش عرض این کلاس عرض، تصویر نیز کاهش خواهد یافت .
همچنین اختصاص max-width با مقدار ۱۰۰% از نمایش تصویر با ابعاد بزرگتر از مقدار واقعی جلوگیری خواهد کرد.
برخی از کاربران جهت نمایش تصویر به صورت تمام صفحه مقدار ۱۰۰% را به صفت width اختصاص می دهند این تعریف در مواردی که عرض تصویر کمتر از عرض container یا عرض صفحه باشد باعث کشیدگی تصویر یا نمایش آن در ابعادی بزرگتر از مقدار واقعی و کاهش کیفیت آن خواهد شد.
البته در صورتی که تمایل دارید پوسته با مروگر های IE6 و IE7 سازگار باشد به جای صفت max-width باید از width در شیوه نامه های فرعی که جهت این مرورگرها طراحی می کنید استفاده نمایید.
اگر علاقمند به طراحی و کدنویسی برای وب هستید حتما با واژه تصاویر Retina آشنایی دارید این اصطلاح توسط apple و جهت معرفی کیفیت صفحات نمایش دستگاه های تولید شده توسط این شرکت معرفی شده است .
فرض کنید شما قصد دارید لوگوی سایت را در ابعاد ۲۰۰*۲۰۰ و با کیفیتی بالاتر از حالت عادی نمایش دهید راه حلی که در این مورد به نظر می رسد ساخت تصویری با ابعاد ۴۰۰*۴۰۰ و نمایش آن در ابعاد ۲۰۰*۲۰۰ خواهد بود بدین ترتیب چگالی پیکسل ها ۲ برابر شده و کیفیت بهتری از تصویر را خواهید داشت سوالی که این جا مطرح است نحوه نمایش تصویر ۴۰۰*۴۰۰ در ابعاد ۲۰۰*۲۰۰ خواهد بود اولین راه حل اختصاص عرض ۲۰۰ به تصویر به شکل زیر است :
