خاصیت object-fit در CSS
خاصیت object-fit در CSS برای مشخص کردن نحوه تغییر اندازه یک عنصر <img> یا <video> به منظور مناسب‌سازی آن با ظرف خود استفاده می‌شود.
مقادیر خاصیت object-fit
این خاصیت به محتوا می‌گوید که چگونه ظرف خود را پر کند، به‌طوری‌که امکان دارد ویژگی‌های زیر را داشته باشد:
- fill: این مقدار پیش‌فرض است. تصویر برای پر کردن ابعاد داده شده تغییر اندازه می‌دهد و اگر لازم باشد، کشیده یا فشرده می‌شود.
- contain: تصویر نسبت ابعاد خود را حفظ کرده و برای مناسب‌سازی در ابعاد داده شده تغییر اندازه می‌دهد.
- cover: تصویر نسبت ابعاد خود را حفظ کرده و ابعاد داده شده را پر می‌کند. تصویر برای مناسب‌سازی برش می‌خورد.
- none: تصویر تغییر اندازه نمی‌دهد.
- scale-down: تصویر به کوچک‌ترین نسخه
noneیاcontainتغییر اندازه می‌دهد.
استفاده از object-fit: cover;
اگر از object-fit: cover; استفاده کنیم، تصویر نسبت ابعاد خود را حفظ کرده و ابعاد داده شده را پر می‌کند. تصویر برای مناسب‌سازی برش می‌خورد:
img {
width: 200px;
height: 300px;
object-fit: cover;
}استفاده از object-fit: contain;
اگر از object-fit: contain; استفاده کنیم، تصویر نسبت ابعاد خود را حفظ کرده و برای مناسب‌سازی در ابعاد داده شده تغییر اندازه می‌دهد:
img {
width: 200px;
height: 300px;
object-fit: contain;
}استفاده از object-fit: fill;
اگر از object-fit: fill; استفاده کنیم، تصویر برای پر کردن ابعاد داده شده تغییر اندازه می‌دهد و اگر لازم باشد، کشیده یا فشرده می‌شود:
img {
width: 200px;
height: 300px;
object-fit: fill;
}استفاده از object-fit: none;
اگر از object-fit: none; استفاده کنیم، تصویر تغییر اندازه نمی‌دهد:
img {
width: 200px;
height: 300px;
object-fit: none;
}استفاده از object-fit: scale-down;
اگر از object-fit: scale-down; استفاده کنیم، تصویر به کوچک‌ترین نسخه none یا contain تغییر اندازه می‌دهد:
img {
width: 200px;
height: 300px;
object-fit: scale-down;
}مثال دیگر
در این مثال دو تصویر داریم که می‌خواهیم آن‌ها عرض ۵۰٪ از پنجره مرورگر و ارتفاع ۱۰۰٪ را پر کنند.
اگر در مثال زیر از object-fit استفاده نکنیم، با تغییر اندازه پنجره مرورگر، نسبت ابعاد تصاویر از بین می‌رود.
<img src="norway.jpg" class="fill">
<img src="paris.jpg" class="fill">در مثال بعدی، از object-fit: cover; استفاده می‌کنیم، بنابراین وقتی پنجره مرورگر را تغییر اندازه می‌دهیم، نسبت ابعاد تصاویر حفظ می‌شود.
<img src="norway.jpg" class="cover">
<img src="paris.jpg" class="cover">مثال‌های بیشتر از خاصیت 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;}با استفاده از این خاصیت، می‌توانید کنترل بیشتری بر روی نحوه نمایش تصاویر و ویدیوها در طراحی‌های خود داشته باشید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام