object-fit — CSS Technical Interview Questions & Answers

How replaced content (img/video) fits its box.

object-fit

  • How replaced content (img/video) fits its box.
  • object-fit is a CSS property: it changes how a selected element looks or sits. You write it inside a rule: .card { object: …; }
  • Change one value, refresh, say what moved: colour, space, size, or stacking. That is how you learn properties — not by memorising the spec.
  • Trap: putting it on the wrong selector (parent vs child). Trap: px only on a phone page — learn rem/%/flex too when it is layout.
  • Box model reminder: width/height, padding, border, margin are different. If object-fit is about space, draw the box.

Technical Interview Tip: object-fit: one rule on .card, then say what changed.

Code Examples for object-fit

object-fit — working example

.thumb {
  width: 160px;
  height: 120px;
  object-fit: cover; /* crop to fill */
}

.contain {
  width: 160px;
  height: 120px;
  object-fit: contain; /* letterbox if needed */
  background: #e2e8f0;
}

object-fit sizes replaced content (img/video) inside its box: cover, contain, fill, etc.

How to Explain object-fit to an Interviewer

What does object-fit do?

A CSS property that changes look/layout Write it in a rule and refresh