To ensure an image fits inside a fixed-size container without overflowing or distorting, you can use CSS properties like object-fit or set explicit max-width and max-height values. This keeps the image contained within its box while maintaining aspect ratio.

Common Techniques

1
object-fit: cover — scales the image to fill the container while preserving aspect ratio; parts may be cropped.
2
object-fit: contain — scales the image to fit entirely inside the container, leaving empty space if necessary.
3
max-width: 100% and max-height: 100% — prevents the image from exceeding the container’s boundaries.
4
overflow: hidden — hides any image parts that still exceed the box area.

Example: Image contained in a box

Difficulty: 3/10

Topics: object-fit, background-size, responsive images

Scenario Questions

0-2 years experience

1
You have a 200 × 200 px div with an image that is 400 × 300 px inside it. How would you make the image scale to fit without stretching or overflowing?
2
If you set width:100% on the img, what happens when its aspect ratio differs from the container’s, and how would you fix any issues?
3
Which CSS property lets you make the image fill the box while preserving its aspect ratio, and what would the rule look like?

2-5 years experience

1
Our product cards need a 150 × 150 px thumbnail area. Images come in many sizes and must be fully visible without cropping. How would you implement this, and what trade‑offs does your solution have?
2
A teammate used object-fit: fill; and now the images look distorted. Explain why and how you’d correct it.
3
During QA some images overflow their container on Safari but not Chrome. What debugging steps would you take and what CSS fixes might resolve the issue?

5-8 years experience

1
We have a reusable Image component used across dozens of pages that must handle high‑DPI screens, lazy loading, and optional cropping to a fixed aspect‑ratio box. Describe how you’d architect the CSS (and any supporting JS) to meet these requirements while keeping performance high.
2
We’re migrating a legacy site that uses background images on divs for product thumbnails. The new responsive layout must work in all browsers, including IE11. What CSS strategies would you adopt, and how would you handle compatibility and maintainability?
3
When the image component sits inside a flex container with align-items: stretch, some images still overflow. Explain why and propose a robust cross‑browser solution.

8+ years experience

1
Our company is consolidating multiple brand sites into a single UI platform. Each brand uses different image handling patterns (img tags, CSS backgrounds, CDN resizing). How would you define a platform‑wide strategy for fitting images into fixed containers that balances performance, SEO, accessibility, and future extensibility?
2
We need to roll out a new responsive image policy that eliminates layout shift across all web properties. What architectural changes—CSS, build pipeline, CDN configuration—would you recommend to ensure images always fit their containers without overflow, and how would you coordinate this effort across teams?

Follow-up Questions

❓When would you choose `object-fit: contain` versus `cover`?
❓How do you ensure the image remains sharp on retina displays?
❓What fallback technique would you use for browsers that don’t support `object-fit`?