CSS object-fit کی خاصیت
- نوحة قبل @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 |
| نویسی JavaScript: | object.style.objectFit="cover" |
پشتیبانی مرورگر
اعداد میزانی در جدول نشاندهنده نسخه اولین مرورگر پشتیبان از این ویژگی است.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
- نوحة قبل @namespace
- نوحة بعد object-position
