ویژگی object-fit CSS
- صفحه قبل @namespace
- صفحه بعدی object-position
تعریف و استفاده
ویژگی objectFit برای تنظیم اندازه <img> یا <video> برای تطابق با محفظه خود استفاده می‌شود.
این ویژگی روشی را که محتوا درون محفظه پر می‌شود را مشخص می‌کند. به عنوان مثال، "حفظ نسبت عرض به ارتفاع" یا "گسترش و اشغال فضای ممکن بیشترین مقدار ممکن".
لطفاً به:
آموزش CSSCSS object-fit
دستورالعمل CSSCSS object-position
دستورالعمل HTML DOMویژگی objectFit
مثال
بORDERهای دو سمت تصویر بریده می‌شود، نسبت عرض به ارتفاع حفظ می‌شود و فضای خالی پر می‌شود:
img.a {
width: 200px;
height: 400px;
object-fit: cover;
}
اسکریپت CSS
object-fit: fill|contain|cover|scale-down|none|initial|inherit;
مقدار ویژگی
| مقدار | توضیح |
|---|---|
| fill | مقدار پیش‌فرض. اندازه محتوای جایگزین تنظیم می‌شود تا جعبه محتوای عنصر پر شود. اگر نیاز باشد، اوبژه کشیده یا فشرده می‌شود. |
| contain | محتوای جایگزین به اندازه تنظیم می‌شود تا نسبت عرض به ارتفاع خود را حفظ کند و با جعبه محتوای عنصر هماهنگ شود. |
| cover | اندازه محتوای جایگزین تنظیم می‌شود تا در حین حفظ نسبت عرض به ارتفاع، کل جعبه محتوای پرکننده را پر کند. اوبژه بریده می‌شود. |
| none | محتوای جایگزین به اندازه تنظیم نمی‌شود. |
| scale-down | اندازه محتوای درون به یکی از none یا contain مشابه است، بسته به اینکه کدام یک اندازه اوبژه کوچکتر است. |
| initial | این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. لطفاً به: initial. |
| inherit | این ویژگی را از عنصر والد خود ارث می‌برد. لطفاً به: inherit. |
جزئیات فنی
| مقدار پیش‌فرض: | لطفاً به ویژگی‌های جداگانه مراجعه کنید. |
|---|---|
| وراثت: | خیر |
| انیمیشن: | پشتیبانی نمی‌شود. لطفاً به:ویژگی‌های مرتبط با انیمیشن. |
| نسخه: | CSS3 |
| اسکریپت جاوااسکریپت: | object.style.objectFit="cover" |
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه اولین مرورگر پشتیبان از این ویژگی هستند.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
- صفحه قبل @namespace
- صفحه بعدی object-position
