ویژگی CSS object-fit
- صفحه قبلی نمونه‌های تصویری CSS
- صفحه بعدی ویژگی object-position
CSS object-fit مصاحبه‌های پیشنهادی:
این ویژگی برای تعیین اینکه چگونه اندازه‌ی <img> یا <video> باید تنظیم شود تا با جعبه‌ی خود سازگار شود، استفاده می‌شود.
پشتیبانی مرورگر
| این جدول شماره‌های نسخه‌ی اولین مرورگری که این ویژگی را به طور کامل پشتیبانی می‌کند، را نشان می‌دهد. | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| object-fit | ۳۱.۰ | ۱۶.۰ | ۳۶.۰ | ۷.۱ | ۱۹.۰ |
ویژگی CSS object-fit
CSS object-fit این ویژگی برای تعیین اینکه چگونه اندازه‌ی <img> یا <video> باید تنظیم شود تا با جعبه‌ی خود سازگار شود، استفاده می‌شود.
این ویژگی به محتوای مختلفی برای پر کردن جعبه‌ی محتوای آن اشاره دارد. مانند
لطفاً به تصویر تیرچه‌های شانگهای از باغ گل شانگهای نگاه کنید که ۳۰۰x۳۰۰ پیکسل است:
اما، اگر تصویر بالا را به اندازه‌ی ۲۰۰x۳۰۰ پیکسل تنظیم کنیم، به این شکل خواهد بود:
مثال
img {
width: 200px;
height: 300px;
}
ما مشاهده می‌کنیم که تصویر به اندازه‌ی ۲۰۰x۳۰۰ پیکسل مناسب شده است و نسبت عرض به ارتفاع خراب شده است.
اگر ما از object-fit: cover;، که باعث می‌شود سمت‌های تصویر برش داده شود، نسبت عرض به ارتفاع حفظ شود و فضای خالی پر شود، مانند این:
مثال
img {
width: 200px;
height: 400px;
object-fit: cover;
}
یک مثال دیگر
در اینجا دو تصویر داریم و می‌خواهیم آنها ۵۰٪ عرض و ۱۰۰٪ ارتفاع پنجره‌ی مرورگر را پر کنند.
در مثال زیر، ما از object-fitبنابراین، هنگامی که اندازه‌ی پنجره‌ی مرورگر را تغییر می‌دهیم، نسبت عرض به ارتفاع تصویر خراب خواهد شد:
مثال
در مثال بعدی، ما از object-fit: cover;بنابراین، هنگامی که اندازه‌ی پنجره‌ی مرورگر را تغییر می‌دهیم، نسبت عرض به ارتفاع تصویر حفظ خواهد شد:
مثال
تمام مقادیر ویژگی CSS object-fit
object-fit این ویژگی می‌تواند مقادیر زیر را پذیرا باشد:
fill- مقدار پیش‌فرض. اندازه‌ی محتوای جایگزین را تنظیم کنید تا جعبه‌ی محتوای عناصر را پر کند. اگر نیاز باشد، اشیاء را کشیده یا فشرده کنید تا با این شیء سازگار شوند.contain- محتوای جایگزین را بزرگ‌نمایی کنید تا نسبت عرض به ارتفاع آن حفظ شود و آن را در جعبه‌ی محتوای عناصر قرار دهید.cover- اندازه‌ی محتوای جایگزین را تنظیم کنید تا در حالی که طول و عرض محتوای جعبه‌ی پرکننده را حفظ می‌کند، در جعبه‌ی محتوای کامل آن قرار گیرد. این شیء به طور خودکار برش داده خواهد شد تا با آن سازگار شود.none- اندازه جایگزین محتوا را تنظیم نمی‌کند.scale-down- تنظیم اندازه محتوا مانند عدم تعیین محتوا یا محتوای شامل (که منجر به اندازه کوچک‌تر اشیاء خاص می‌شود)
در اینجا مثال‌هایی از object-fit مقادیر ممکن همه ویژگی‌ها:
مثال
fill {object-fit: fill;}
contain {object-fit: contain;}
cover {object-fit: cover;}
scale-down {object-fit: scale-down;}
none {object-fit: none;}
- صفحه قبلی نمونه‌های تصویری CSS
- صفحه بعدی ویژگی object-position
