تصاویر و ویدیوها در طراحی واکنش گرا

Responsive Web Design - Images & Videos

0 233

تصاویر در طراحی ریسپانسیو در CSS

ساده ترین راه و اولین روش برای واکنش گرا کردن تصاویر استفاده از width به صورت درصدی و تعیین ارتفاع به صورت auto است. در این حالت تصویر به راحتی واکنش گرا بوده و با تغییر سایز صفحه اندازه اش را تغییر می دهد:

مشاهده ی خروجی در JSBin

اگر به مثال بالا دقت کرده باشید و با تغییر سایز مرورگر خود تغییر سایز تصویر آن را دیده باشید حتما متوجه شده اید که این تصویر تا بی نهایت بزرگ می شود. بنابراین در نمایشگرهای بسیار بزرگ از اندازه ی اصلی خود هم بزرگ تر می شود که در نوع خود باعث افت کیفیت است. بنابراین بهتر است از max-width استفاده کنید تا حداکثر عرض را مشخص کنید.

استفاده از max-width

اگر خاصیت max-width را روی 100 درصد گذاشته باشید، تصویر واکنش گرا بوده و به نسبت عرض صفحه بزرگ تر می شود اما هیچگاه بزرگ تر از اندازه ی اصلی خودش نخواهد شد. به این مثال دقت کنید:

مشاهده ی خروجی در JSBin

برای مشاهده ی تغییر باید به صفحه ی خروجی این کد بروید و اندازه ی قسمت خروجی را تا می توانید بزرگ کنید. تصویر تا قسمتی بزرگ می شود اما از جایی به بعد دیگر تغییر نمی کند.

حالا می توانیم به همین روش تصویری به مثال پروژه مان (مثال از قسمت های قبلی) اضافه کنیم:

مشاهده ی خروجی در JSBin

تصاویر پس زمینه

تصاویر پس زمینه نیز می توانند واکنش گرا باشند. در واقع سه روش مختلف برای واکنش گرا کردن این تصاویر وجود دارد که آن ها را بررسی می کنیم:

روش اول: اگر خصوصیت background-size را روی contain قرار دهید، تصویر پس زمینه سعی می کند خودش را با تغییر عرض تغییر دهد و فضای محتوا را پُر کند. در این روش تصویر، نسبت طول و عرض خود را حفظ می کند و این نسبت از بین نمی رود:

مشاهده ی خروجی در JSBin

همانطور که می بینید در این مثال تصویر سعی می کند که فضای خالی را پُر کند اما هیچگاه نسبت طول و عرض خود را بهم نمی ریزد بنابراین به ناچار قسمت هایی از مستطیل قرمز خالی می ماند.

روش دوم: اگر مقدار خصوصیت background-size را روی “%100 %100” قرار دهید، تصویر آنقدر خود را می کِشد که فضای خالی را به هر قیمتی پُر کند. به این مثال توجه کنید:

مشاهده ی خروجی در JSBin

روش سوم: اگر مقدار خصوصیت background-size را روی cover قرار دهید، تصویر تمام فضای محتوا را می پوشاند. توجه کنید که cover نسبت طول و عرض تصویر را نیز حفظ می کند. بنابراین برای آنکه تصویر را نمی کشد بلکه با همان نسبت طول و عرض بزرگ می کند، قسمتی از تصویر بریده خواهد شد. این موضوع را در مثال زیر می بینید:

مشاهده ی خروجی در JSBin

تصاویر مختلف برای عرض های مختلف

ممکن است تصویر بسیار بزرگی داشته باشید که روی صفحات دسکتاپ و صفحات بزرگ دیگر به خوبی نمایش داده شود اما برای گوشی های همراه اصلا مناسب نباشد. در این حالت چرا تصویر بزرگی را بارگذاری کنیم که بعدا با کدها آن را کوچک کنیم؟! برای جلوگیری از بارگذاری تصاویر بزرگ و کاهش زمان بالا آمدن صفحات می توانیم از media query ها استفاده کنیم تا تصاویر مختلفی را بر اساس سایز صفحه ی نمایشگر کاربر برای او بارگذاری کنیم. به این مثال دقت کنید:

مشاهده ی خروجی در JSBin

البته می توانید به جای min-width از min-device-width استفاده کنید؛ بدین صورت CSS اندازه ی نمایشگر دستگاه کاربر (موبایل، تبلت و …) را چک می کند نه اندازه ی مرورگر کاربر را! در چنین حالتی اگر اندازه ی مرورگر را تغییر دهید، تصویر تغییری نخواهد کرد:

مشاهده ی خروجی در JSBin

عنصر <picture>

عنصر <picture> روش دیگر استفاده از تصاویر مختلف برای عرض های مختلف است. وضعیت پشتیبانی از این عنصر به صورت زیر می‌باشد:

عنصر کروم edge فایرفاکس اپرا سافاری
<picture> 38.0 13 38.0 9.1 25.0

در واقع عنصر <picture> دقیقا شبیه به عناصر <video> و <audio> کار می کند؛ شما چندین منبع مختلف را تعیین می کنید و اولین منبعی که طبق مشخصات باشد به کاربر نمایش داده می شود:

مشاهده ی خروجی در JSBin

دستور srcset الزامی است و باید حتما حضور داشته باشد. کار آن تعیین منبع تصویر است. دستور media دلخواه است و برخی از media query های از پیش تعریف شده در CSS را قبول می کند. البته حواستان باشد که حتما یک <img> نیز تعریف کنید تا مرورگرهایی که از <picture> پشتیبانی نمی کنند بدون تصویر نمایش داده نشوند.

ویدیوها در طراحی ریسپانسیو در CSS

اگر خصوصیت width ویدیو را روی 100 درصد قرار دهید، ویدیو واکنش گرا شده و با تغییر سایز صفحه تغییر سایز می دهد:

مشاهده ی خروجی در JSBin

البته همانطور که برای تصاویر هم ذکر شد، این روش باعث می شود که ویدیو در مانیتورهای بزرگ از اندازه ی اصلی خودش بزرگ تر شود. بنابراین max-width انتخاب بهتری خواهد بود.

ما در مثال زیر از max-width استفاده کرده و آن را روی 100 درصد قرار داده ایم. در این حالت ویدیو هیچ وقت از اندازه ی اصلی خودش بزرگ تر نخواهد شد:

مشاهده ی خروجی در JSBin

امیدواریم از بحث طراحی عکس و ویدئو به صورت ریسپانسیو در CSS استفاده کافی را برده باشید.

ترتیبی که روکسو برای یادگیری مطالب سری CSS پیشرفته به شما توصیه می‌کند:

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.

film izle | eskisehir escort | modanisa | mersin escort | www.ieski.com | eskort adana | www.izmir-eskort.org | kabak koyu | hd tv izle