ویژگی object-fit
می خواهیم «ویژگی object-fit» را یاد بگیریم. این ویژگی می گوید تصویر یا ویدیو داخل جعبه چگونه جا شود. «نسبت تصویر (Aspect Ratio)» یعنی نسبت عرض به ارتفاع.
مقدمه ویژگی object-fit
مقدارها: fill، cover، contain، none و scale-down. هرکدام رفتار کشیدن یا برش را تعیین می کنند. مثل جای دادن عکس در قاب مدرسه.
fill: پر کردن بدون حفظ نسبت
در fill تصویر کش می آید تا قاب پر شود. نسبت تصویر حفظ نمی شود.
.image-container {\n width: 200px;\n height: 300px;\n border: 1px solid black;\n}\n\n.image-container img {\n width: 100%;\n height: 100%;\n object-fit: fill;\n}\ncover: قاب را پر کن، نسبت حفظ شود
در cover تصویر قاب را پر می کند. اگر لازم باشد، برش می خورد.
.image-container {\n width: 200px;\n height: 300px;\n border: 1px solid black;\n}\n\n.image-container img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\ncontain: همه تصویر، ممکن است حاشیه خالی
در contain کل تصویر دیده می شود. ممکن است فضای خالی بماند.
.image-container {\n width: 200px;\n height: 300px;\n border: 1px solid black;\n}\n\n.image-container img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\nnone: اصلاً تغییر اندازه نده
در none تصویر بدون تغییر اندازه می ماند. ممکن است بیرون بزند.
.image-container {\n width: 200px;\n height: 300px;\n border: 1px solid black;\n}\n\n.image-container img {\n width: 100%;\n height: 100%;\n object-fit: none;\n}\nscale-down: بین none و contain، کوچک تر را بگیر
در scale-down مرورگر بین none و contain کوچک تر را انتخاب می کند.
.image-container {\n width: 200px;\n height: 300px;\n border: 1px solid black;\n}\n\n.image-container img {\n width: 100%;\n height: 100%;\n object-fit: scale-down;\n}\nمثال مقایسه ای سریع
بدون object-fit نسبت خراب می شود. با cover نسبت حفظ می شود.
.row {\n width: 100%;\n height: 300px;\n}\n\n.row img {\n float: left;\n width: 50%;\n height: 100%;\n}\n\n/* نسخه خوب */\n.row img.good {\n object-fit: cover;\n}\nنکته: برای جابه جایی قسمت برش خورده از object-position استفاده کن.
مراحل عملی
- یک قاب با عرض و ارتفاع ثابت بساز.
- تصویر را صددرصد عرض و ارتفاع بده.
- یکی از مقدارهای object-fit را تنظیم کن.
- در موبایل نتیجه را بررسی کن.
جمع بندی سریع
- fill قاب را پر می کند؛ نسبت حفظ نمی شود.
- cover قاب را پر می کند؛ نسبت حفظ می شود.
- contain کل تصویر دیده می شود؛ ممکن است حاشیه بماند.
- none تغییر اندازه نمی دهد؛ احتمال بیرون زدگی.
- scale-down کوچک ترین حالت مناسب را برمی گزیند.
مطالب مرتبط: اشکال تصویر و تراز مرکز تصویر. همچنین راهنمای ویژگی object-fit مرجع سریع توست.