مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. زمانیکه از عناصر چند رسانه ای از جمله <img> و <video> و … در صفحات وب سایت خود استفاده می کنید، در برخی که به دلایلی از جمله کوچک کردن عرض یا ارتفاع مرورگر عرض عنصر نگهدارنده ی تصویر یا ویدئو و … تغییر می کند، ممکن است فقط بخشی از تصویر و یا ویدئو ی اصلی را در اندازه ی جدید مشاهده کنید، برای رفع این مشکل ویژگی object-fit در CSS ارائه شده است که به شما اجازه می دهد تا نحوه نمایش عناصر چند رسانه ای خود را در هنگام تغییر اندازه ی عرض و یا ارتفاع آن مشخص کنید، در ادامه این مباحث به چگونگی استفاده از ویژگی object-fit در CSS پرداخته ایم.
ویژگی object-fit در CSS
در ادامه ی این آموزش با ساختار کلی ویژگی object-fit در CSS و عملکرد مقادیر آن آشنا خواهید شد.
خصوصیات object-fit برای مشخص کردن نحوه تغییر اندازه تصویر <img> یا <video> نسبت به ظرف آن استفاده می شود.
پشتیبانی در مرورگرها
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|
| object-fit | ۳۱٫۰ | ۱۶٫۰ | ۳۶٫۰ | ۷٫۱ | ۱۹٫۰ |
آشنایی با ویژگی object-fit در CSS
این ویژگی به محتویات چند رسانه ای می گوید که ظرف خود را به روش های مختلف پر کنند؛ مانند “حفظ نسبت ابعاد” یا “کشش محتوا به اندازه فضای ممکن”.
به تصویر زیر که با اندازه ی ۴۰۰×۳۰۰ پیکسل است توجه کنید:
اگر اندازه ی آن را به ۲۰۰×۴۰۰ پیکسل تغییر دهیم به صورت زیر تغییر خواهد کرد:
همانطور که مشاهده می کنید تصویر فوق در ابعاد ۲۰۰×۴۰۰ فشرده شده و کیفیت مطلوبی ندارد.
اگر از ویژگی object-fit: cover; استفاده کنید ابعاد اصلی تصویر حفظ شده و فقط بخش های خارج از کادر نمایش داده نمی شود.
مثال : مقدار cover در object-fit
| img { width: 200px; height: 400px; object-fit: cover; } |
سایر مثال ها
در این قسمت دو تصویر داریم می خواهیم طوری تنظیم شوند که ۵۰% از عرض مرورگر و ۱۰۰% ارتفاع را پر کند.
در مثال زیر ما از ویژگی object-fit استفاده نمی کنیم، بنابراین با تغییر اندازه ی مرورگر نسبت ابعاد اصلی تصاویر از بین می رود:
مثال : عدم استفاده از object-fit
| <!DOCTYPE html> <html> <body> <h2>Not Using object-fit</h2> <p>Here we use do not use "object-fit", so when we resize the browser window, the aspect ratio of the images will be destroyed:</p> <div style="width:100%;height:400px;"> <img src="rock600x400.jpg" alt="Norway" style="float:left;width:50%;height:100%;"> <img src="paris.jpg" alt="Paris" style="float:left;width:50%;height:100%;"> </div> </body> </html> |
نتیجه:
مثال فوق را با افزودن ویژگی object-fit: cover; به تصاویر تکمیل می کنیم، در نتیجه با تغییر اندازه ی مرورگر نسبت اصلی تصاویر حفظ می شود:
مثال : خصوصیت object-fit:cover
| <!DOCTYPE html> <html> <body> <h2>Using object-fit</h2> <p>Here we use "object-fit: cover;", so when we resize the browser window, the aspect ratio of the images is preserved:</p> <div style="width:100%;height:400px;"> <img src="rock600x400.jpg" alt="Norway" style="float:left;width:50%;height:100%;object-fit:cover;"> <img src="paris.jpg" alt="Paris" style="float:left;width:50%;height:100%;object-fit:cover;"> </div> </body> </html> |
نتیجه: 
تمام مقادیر ویژگی object-fit
ویژگی object-fit می تواند شامل یکی از مقادیر زیر باشد:
fill : این حالت پیش فرض است که در صورت کوچک یا بزرگ شدن تصویر، محتوای آن نیز فشرده یا کشیده می شود.contain : محتوای جایگزین برای حفظ نسبت ابعاد آن در حالی که درون کادر محتوا عنصر قرار دارد، مقیاس پذیر است.cover : در صورت تغییر اندازه نسبت اصلی محتوای تصویر حفظ خواهد شد.none : محتوای تصویر هیچ تغییری نمی کند.scale-down : نسبت ابعاد محتوای تصویر به نسبت اندازه ی تصویر تغییر می کند، اما ابعاد اصلی محتوا حفظ می شود.
مثال زیر تفاوت های هر یک از مقادیر ویژگی object-fit را به خوبی نشان می دهد:
مثال : تست مقادیر object-fit
| .fill {object-fit: fill;} .contain {object-fit: contain;} .cover {object-fit: cover;} .scale-down {object-fit: scale-down;} .none {object-fit: none;} |
کلام آخر
با استفاده صحیح از ویژگی object-fit در CSS تصویر و محتوای چند رسانه ای وب سایت با تغییر اندازه ی عنصر ظرف خود، نسبت اصلی ابعاد محتوای خود را حفظ کرده و کشیده و یا فشرده نمی شود.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
