مقدمه
با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی قصد داریم . به موضوع آموزش responsive کردن عکس ها در css، بپردازیم. همانطور که در آموزشهای قبلی نیز اشاره کردیم، ویژگی responsive در واقع باعث می شود که عناصر یک صفحه وب با تغییر اندازه مرورگر ، دچار به هم ریختگی نشود و نظم آن ها حفظ شود.
در سری آموزشهای بخش Responsive در css، به موضوعات مهم و کاربردی استفاده از تنظیمات viewport در css و استفاده از grid-view در css ، برای Responsive کردن قالب وب سایت پرداختیم.
در بخش جلوه های ویژه و افکت گذاری نیز به موضوعات کار با ویژگی Transitions در css و کار با ویژگی انیمیشن در css و افکت گذاری عکس ها در css پرداختیم.
در ادامه به آموزش responsive کردن عکس ها در css، می پردازیم.
responsive کردن عکس ها در css
آموزش responsive کردن عکس ها در css
برای responsive کردن عکس ها در css ، باید تعیین کنید که با تغییر عرض و ارتفاع پنچره مرورگر ، عرض و ارتفاع عکس نیز به همان نسبت تغییر کند.
استفاده از خصوصیت width عکس در responsive
اگر ویژگی width به ۱۰۰٪ تنظیم شود، تصویر responsive خواهد بود و مقیاس عرض و ارتفاع به نسبت مرورگر را خواهد داشت:
مثال:
استفاده از خصوصیت max-width عکس در responsive
اگر ویژگی max-width به ۱۰۰ درصد تنظیم شود. در صورتی که لازم باشد اندازه عکس کوچکتر خواهد شد اما هرگز بزرگتر از اندازه اصلی خود نمی شود.
مثال:
تصاویر پس زمینه
تصاویر پس زمینه نیز می توانند قابلیت responsive را داشته باشند. ما سه روش را برای اینکار بیان می کنیم:
۱- اگر ویژگی background-size با مقدار “contain” تنظیم شود ، اندازه تصویر پس زمینه به نسبت محتوا تنظیم می شود و نسبت تصویر نیز حفظ می شود.(رابطه متناسب بین عرض تصویر و ارتفاع).
مثال:
مثال : افزودن تصویر به یک قالب ساده
| div { width: 100%; height: 400px; background-image: url('img_flowers.jpg'); background-repeat: no-repeat; background-size: contain; border: 1px solid red; } |
۲- اگر ویژگی background-size با مقدار ۱۰۰%۱۰۰% تنظیم شود، عکس پس زمینه کل محدوده محتوا را پوشش می دهد.
مثال:
مثال : تست رسپانسیو تصویر
| div { width: 100%; height: 400px; background-image: url('img_flowers.jpg'); background-size: 100% 100%; border: 1px solid red; } |
۳- اگر ویژگی background-size با “cover” تنظیم شود، عکس پی زمینه، در اندازه اصلی خود تمام محدوده محتوا را پوشش می دهد، و بعضی از قسمت های عکس نیز برش می خورد و مشاهده نمی شود.
مثال:
مثال : عرض کاملا 100%
| div { width: 100%; height: 400px; background-image: url('img_flowers.jpg'); background-size: cover; border: 1px solid red; } |
اگر ویژگی background-size را با “cover” مقداردهی کنید، تصویر با رسپانسیو شدن کشیده و جمع نمی شود.
مثال : مقدار سایز
| div { width: 100%; height: 400px; background-image: url('img_flowers.jpg'); background-size: cover; border: 1px solid red; } |
استفاده از تصاویر مختلف برای دستگاههای مختلف
یک تصویر بزرگ می تواند در یک صفحخه نمایش کامپیوتر دسکتاپ بدون مشکل نمایش داده شود، اما در صفحه نمایش های کوچکتر مانند موبایل، دچار مشکل می شود.
یک راه حل ساده و کاربردی استفاده از تصاویر مختلف برای صفحه نمایش هایی با اندازه های مختلف است. برای اینکار می توانید از ویژگی media queries که در پست های آموزش قبل با آن آشنا شدید ، استفاده کنید.
مثال: استفاده از دو تصویر ، یکی برای صفحه نمایش کامپیوتر و دیگری برای صفحه نمایش های کوچک مانند موبایل:
مثال : تصاویر مختلف در دستگاه های مختلف
| /* برای صفحه نمایش هایی با عرض کوچکتر از 400 پیکسل */ body { background-image: url('img_smallflower.jpg'); } /* برای صفحه نمایش هایی با عرض بزرگتر از 400 پیکسل */ @media only screen and (min-width: 400px) { body { background-image: url('img_flowers.jpg'); } } |
نکته: شما می توانید از ویژگی min-device-width به جای min-width در media queries ، استفاده کنید، در این صورت به جای چک کردن عرض مرورگر ، عرض صفحه نمایش دستگاه را چک می شود. اینکار باعث می شود که با تغییر دادن اندازه مرورگر ، عکس تغییر نکند.
مثال:
مثال : ویژگی min-device-width
| /* برای صفحه نمایش هایی با عرض کوچکتر از 400 پیکسل */ body { background-image: url('img_smallflower.jpg'); } /* برای صفحه نمایش هایی با عرض بزرگتر از 400 پیکسل */ @media only screen and (min-device-width: 400px) { body { background-image: url('img_flowers.jpg'); } } |
عنصر <picture> در html
عنصر <picture> به شما اجازه ی تعریف بیش از یک تصویر را در یک تگ <picture> می دهد.
پشتیبانی <picture> در مرورگر ها
| Element | Internet Explorer / Edge | Chrome | Firefox | Safari | Opera |
|---|
| <picture> | ۱۳ | ۳۸٫۰ | ۳۸٫۰ | ۹٫۱ | ۲۵٫۰ |
عملکرد عنصر <picture> همانند عناصر <video> و <audio> می باشد. بنابراین می توانید چندین آدرس تصویر را استفاده کنید.
مثال : عنصر <picture>
| " ><picture> <source srcset="img_smallflower.jpg" media="(max-width: 400px)"> <source srcset="img_flowers.jpg"> <img src="img_flowers.jpg" alt="Flowers"> </picture> |
صفت srcset آدرس تصویر را مشخص می کند.
صفت media نیز ویژگی رسپانسیو را مشخص می کند.
همچنین باید یک تگ <img> نیز برای مرورگر هایی که از <picture> پشتیبانی نمی کنند نیز اضافه کنید.
کلام آخر
همانطور که در بخش های قبلی نیز اشاره کردیم ، تصاویر وب سایت ها یکی از بخش های اصلی و محتوای ها اصلی وب سایت هاست که از این رو باید نسبت واکنش گرا کردن تصاویر در CSS نیز اقدام کرد.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
حامد
خیلی خیلی ممنونم،
خداوند عوض اش را بهتون بده.
صادق
خواهش می‌کنم.
Sajjad
عالییییییییی
دمتون گرم
میلاد
دمتون گرم واقعا من تو هیچ سایتی کامنت نمیزارم ولی این پستتون واقعا کمکم کرد
mahdi
سلام آقا دستتون درد نکنه خدا رو شکر جواب داد دمتون گرم همیشه موفق باشید انشالله.
ایوب
سلام من یه سوالی برام پیش اومده جوابش رو هیچ جا نگرفتم
وقتی با استایل عرض و طول عکس رو تغییر میدیم آیا سایر عکس هم کوچکتر میشه ؟
مثلا وقتی تو حالت موبایل نیاز به نشون دادن یک عکس بزرگ نداری و با استایل اندازه رو کوچکتر میکنی ، عکس با همون سایز بزرگ لود میشه توی مرورگر کاربر یا خیر ؟