ویژگی objectFit Style
- صفحه قبلی minWidth
- صفحه بعدی objectPosition
- برگشت به لایه بالاتر اجزای Style HTML DOM
تعریف و استفاده
objectFit ویژگی برای تعیین نحوه تنظیم اندازه <img> یا <video> برای مناسب شدن به جعبه خود استفاده می‌شود.
این ویژگی به محتوای داخل بسته‌ها به روش‌های مختلفی پر می‌کند؛ به عنوان مثال، "حفظ نسبت ابعاد" یا "گسترش و به حداکثر ممکن پر کردن فضای خالی".
لطفاً به:
آموزش CSS:CSS object-fit
دستورالعمل CSS:ویژگی object-fit
مثال
کنار رفتن تصاویر دو طرف، حفظ نسبت ابعاد و پر کردن فضای خالی:
document.getElementById("myImg").style.objectFit = "cover";
قوانین
بازگشتی ویژگی objectFit:
object.style.objectFit
تنظیم ویژگی objectFit:
object.style.objectFit = "fill|contain|cover|scale-down|none|initial|inherit"
مقدار ویژگی
| مقدار | توضیح |
|---|---|
| fill | پیش‌فرض. اندازه محتوای جایگزین را تنظیم می‌کند تا جعبه محتوای عنصر را پر کند. اگر نیاز باشد، اشیاء ممکن است کشیده یا فشرده شوند. |
| contain | محتوای جایگزین را بزرگ‌کن تا نسبت ابعاد خود را حفظ کند و به جعبه محتوای عنصر مناسب شود. |
| cover | اندازه محتوای جایگزین را تنظیم می‌کند تا در هنگام پر کردن کلیه‌ی جعبه محتوای عنصر، نسبت ابعاد خود را حفظ کند. اشیاء ممکن است برش داده شوند. |
| none | محتوای جایگزین اندازه‌گذاری نمی‌شود. |
| scale-down | اندازه محتوای این ویژگی با none یا contain یکی از آن‌ها مشابه است، بسته به اینکه کدام یک از آن‌ها اندازه اشیاء را کوچکتر می‌کند. |
| initial | این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. لطفاً به initial. |
| inherit | این ویژگی را از عنصر والد خود ارث می‌برد. لطفاً به inherit. |
جزئیات فنی
| مقدار پیش‌فرض: | fill |
|---|---|
| مقدار بازگشتی: | رشته‌ای که اندازه عناصر را نشان می‌دهد ویژگی object-fit. |
| نسخه CSS: | CSS3 |
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهای پشتیبان از این ویژگی هستند.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
- صفحه قبلی minWidth
- صفحه بعدی objectPosition
- برگشت به لایه بالاتر اجزای Style HTML DOM
