تناسب شیء (Object Fit)
درس float متن را کنار رسانه پیچاند. object-fit سؤال دیگری دربارهٔ رسانه می‌پرسد: وقتی img یا video داخل قاب با اندازهٔ ثابت است، محتوا چطور آن قاب را پر کند؟ قبل از کش آمدن صورت‌ها با fill، cover و contain را مسلط شوید.
جعبهٔ ابزار object-fit
📊 object-fit یک‌نگاهه
| مقدار | کار روزمره |
|---|---|
fill |
کشیدن تا قاب — ممکن است نسبت تصویر خراب شود |
contain |
کل رسانه داخل قاب؛ شاید نوار خالی بماند |
cover |
قاب را پر می‌کند؛ ممکن است لبه‌ها بریده شوند |
none |
اندازهٔ ذاتی می‌ماند؛ شاید بیرون بزند یا جا خالی بماند |
scale-down |
شبیه none یا contain — هر کدام کوچک‌تر باشد |
object-position |
مشخص می‌کند هنگام برش/جا شدن کدام قسمت دیده شود |
object-fit وقتی می‌درخشد که عنصر جایگزین عرض و ارتفاع مشخص داشته باشد (یا هر دو محور مقید باشند). تصویر آزاد با ارتفاع auto قابی برای «جا شدن» ندارد.
cover — قاب را پر کن، برش مجاز است
کارت‌ها و thumbnail قهرمان اغلب می‌خواهند هر پیکسل قاب پر شود. cover بزرگ می‌کند و سرریز را می‌بُرد. قاب مربع را با cover برای شبکهٔ مرتب جفت کنید.
.card__media {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
}
contain — کل تصویر را نشان بده
عکس محصول و نمودار اغلب باید کامل دیده شوند. contain اگر نسبت‌ها فرق کند نوار خالی می‌گذارد — نوار بهتر از لوگوی نصفه‌شده است.
.product__img {
width: 240px;
height: 240px;
object-fit: contain;
background: #f7f7f7;
}
fill می‌کشد — با احتیاط
fill رسانه را به اندازهٔ قاب می‌رساند حتی اگر تناسب به هم بخورد. برای بافت انتزاعی شاید خوب باشد؛ برای صورت، لوگو و نمودار خطرناک است.
.texture {
width: 320px;
height: 120px;
object-fit: fill;
}
object-position برش را نشانه می‌گیرد
وقتی cover می‌بُرد، مرکز پیش‌فرض ممکن است صورت یا لوگو را پنهان کند. با object-position جابه‌جا کنید — درصد یا کلیدواژه‌هایی مثل top و left.
.avatar {
width: 96px;
height: 96px;
border-radius: 50%;
object-fit: cover;
object-position: 50% 20%;
}
عادت آرام object-fit
برای رسانهٔ معنادار از <img> / <video> واقعی با object-fit استفاده کنید. وقتی تصویر فقط کروم تزئینی است سراغ background-size بروید. اول قاب را اندازه بدهید، cover یا contain را انتخاب کنید، بعد موقعیت را ریز کنید.
.avatar {
width: 64px;
height: 64px;
object-fit: cover;
object-position: center top;
border-radius: 50%;
}
خودتان امتحان کنید
- به تصویر عرض و ارتفاع ثابت بدهید و
coverرا باcontainمقایسه کنید. - آواتار دایره‌ای با
coverبسازید وobject-positionرا جابه‌جا کنید. - یک‌بار
fillبزنید و کش‌آمدن را ببینید — بعد برگردید. - همان برش را به‌عنوان تزئین
background-size: coverهم مقایسه کنید. - یک جمله بنویسید: کی contain از cover امن‌تر است؟
اشتباه‌های رایج
- انتظار کار از
object-fitبدون قاب اندازه‌دار - استفاده از
fillروی پرتره و لوگو - قاطی کردن این درس با پیچیدن float یا آفست position
- گذاشتن عکس معنادار فقط در
background-image(alt سخت‌تر می‌شود) - فراموش کردن
object-positionوقتی cover سوژه را پنهان می‌کند
جمع‌بندی
object-fitرسانهٔ جایگزین را داخل قاب اندازه‌دار جا می‌دهدcoverپر می‌کند و ممکن است ببُرد؛containهمه را نشان می‌دهد و شاید نوار بگذاردfillممکن است بکشد — کم استفاده کنیدobject-positionناحیهٔ دیده‌شده را نشانه می‌گیرد- برای محتوای واقعی object-fit؛ برای تزئین background-size
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود