با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی قصد داریم . به موضوع آموزش responsive کردن عکس ها در css، بپردازیم. همانطور که در آموزشهای قبلی نیز اشاره کردیم، ویژگی responsive در واقع باعث می شود که عناصر یک صفحه وب با تغییر اندازه مرورگر ، دچار به هم ریختگی نشود و نظم آن ها حفظ شود.
در سری آموزشهای بخش Responsive در css، به موضوعات مهم و کاربردی استفاده از تنظیمات viewport در css و استفاده از grid-view در css ، برای Responsive کردن قالب وب سایت پرداختیم.
در بخش جلوه های ویژه و افکت گذاری نیز به موضوعات کار با ویژگی Transitions در css و کار با ویژگی انیمیشن در css و افکت گذاری عکس ها در css پرداختیم.
در ادامه به آموزش responsive کردن عکس ها در css، می پردازیم.
برای responsive کردن عکس ها در css ، باید تعیین کنید که با تغییر عرض و ارتفاع پنچره مرورگر ، عرض و ارتفاع عکس نیز به همان نسبت تغییر کند.
اگر ویژگی width به ۱۰۰٪ تنظیم شود، تصویر responsive خواهد بود و مقیاس عرض و ارتفاع به نسبت مرورگر را خواهد داشت:
مثال:
اگر ویژگی max-width به ۱۰۰ درصد تنظیم شود. در صورتی که لازم باشد اندازه عکس کوچکتر خواهد شد اما هرگز بزرگتر از اندازه اصلی خود نمی شود.
مثال:
تصاویر پس زمینه نیز می توانند قابلیت responsive را داشته باشند. ما سه روش را برای اینکار بیان می کنیم:
۱- اگر ویژگی background-size با مقدار “contain” تنظیم شود ، اندازه تصویر پس زمینه به نسبت محتوا تنظیم می شود و نسبت تصویر نیز حفظ می شود.(رابطه متناسب بین عرض تصویر و ارتفاع).
مثال:
1 2 3 4 5 6 7 8 | div { width: 100%; height: 400px; background-image: url('img_flowers.jpg'); background-repeat: no-repeat; background-size: contain; border: 1px solid red; } |
۲- اگر ویژگی background-size با مقدار ۱۰۰%۱۰۰% تنظیم شود، عکس پس زمینه کل محدوده محتوا را پوشش می دهد.
مثال:
1 2 3 4 5 6 7 | div { width: 100%; height: 400px; background-image: url('img_flowers.jpg'); background-size: 100% 100%; border: 1px solid red; } |
۳- اگر ویژگی background-size با “cover” تنظیم شود، عکس پی زمینه، در اندازه اصلی خود تمام محدوده محتوا را پوشش می دهد، و بعضی از قسمت های عکس نیز برش می خورد و مشاهده نمی شود.
مثال:
1 2 3 4 5 6 7 | div { width: 100%; height: 400px; background-image: url('img_flowers.jpg'); background-size: cover; border: 1px solid red; } |
اگر ویژگی background-size
را با “cover” مقداردهی کنید، تصویر با رسپانسیو شدن کشیده و جمع نمی شود.
1 2 3 4 5 6 7 | div { width: 100%; height: 400px; background-image: url('img_flowers.jpg'); background-size: cover; border: 1px solid red; } |
یک تصویر بزرگ می تواند در یک صفحخه نمایش کامپیوتر دسکتاپ بدون مشکل نمایش داده شود، اما در صفحه نمایش های کوچکتر مانند موبایل، دچار مشکل می شود.
یک راه حل ساده و کاربردی استفاده از تصاویر مختلف برای صفحه نمایش هایی با اندازه های مختلف است. برای اینکار می توانید از ویژگی media queries که در پست های آموزش قبل با آن آشنا شدید ، استفاده کنید.
مثال: استفاده از دو تصویر ، یکی برای صفحه نمایش کامپیوتر و دیگری برای صفحه نمایش های کوچک مانند موبایل:
1 2 3 4 5 6 7 8 9 10 11 | /* برای صفحه نمایش هایی با عرض کوچکتر از 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 ، استفاده کنید، در این صورت به جای چک کردن عرض مرورگر ، عرض صفحه نمایش دستگاه را چک می شود. اینکار باعث می شود که با تغییر دادن اندازه مرورگر ، عکس تغییر نکند.
مثال:
1 2 3 4 5 6 7 8 9 10 11 | /* برای صفحه نمایش هایی با عرض کوچکتر از 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> به شما اجازه ی تعریف بیش از یک تصویر را در یک تگ <picture> می دهد.
Element | Internet Explorer / Edge | Chrome | Firefox | Safari | Opera |
---|---|---|---|---|---|
<picture> | ۱۳ | ۳۸٫۰ | ۳۸٫۰ | ۹٫۱ | ۲۵٫۰ |
عملکرد عنصر <picture> همانند عناصر <video>
و <audio>
می باشد. بنابراین می توانید چندین آدرس تصویر را استفاده کنید.
1 2 3 4 5 | " ><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
سلام آقا دستتون درد نکنه خدا رو شکر جواب داد دمتون گرم همیشه موفق باشید انشالله.
ایوب
سلام من یه سوالی برام پیش اومده جوابش رو هیچ جا نگرفتم
وقتی با استایل عرض و طول عکس رو تغییر میدیم آیا سایر عکس هم کوچکتر میشه ؟
مثلا وقتی تو حالت موبایل نیاز به نشون دادن یک عکس بزرگ نداری و با استایل اندازه رو کوچکتر میکنی ، عکس با همون سایز بزرگ لود میشه توی مرورگر کاربر یا خیر ؟