How can I use "object-fit: contain" in CSS and still have a border radius on the image?

Question

I'm trying to show an image in a "lightbox" style so that it will fill the available area on screen, in this case 90% of the width of the page and 70% of the height.

Using object-fit: contain; seems to be the de facto way to do that but it's not quite working with border-radius. Is it possible to use object-fit on an <img> and still have the border radius applied as intended?

You'll need to resize your browser window to see what happens when you run the below snippet. I've got the same code running in JSFiddle, as per the below video.

div {
  margin: auto;
  width: 90vw;
  height: 70vh;

  background-color: DeepSkyBlue;
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain;

  border-radius: 50px;
  background-color: Crimson;
}

<div>
  <img src="https://images.freeimages.com/images/large-previews/773/koldalen-4-1384902.jpg">
</div>

you will need to shrink or expand the img tag itself, not what it renders : example : https://jsfiddle.net/6gw30rvL/ (grid display is only for the vertical-alignment) — G-Cyrillus, Jul 23 '21 at 17:11

score 4 · Answer 1 · answered Jul 23 '21 at 20:15

Contain isn't really helping here.

Instead, set the max width and height of the img to 100%. The system will fit it in either totally top to bottom or side to side, but the img element will have whatever dimensions it needs so the border radius will work on it OK.

To center the img, if that is what you want, you can display: flex the parent div and justify/align items to the center.

div {
  margin: auto auto;
  width: 90vw;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: DeepSkyBlue;
}

img {
  max-width: 100%;
  max-height: 100%;

  border-radius: 50px;
  background-color: Crimson;
}

<div>
  <img src="https://images.freeimages.com/images/large-previews/773/koldalen-4-1384902.jpg">
</div>

I don’t understand your comment @evolross I’ve just tried it with a 200x 2000 image and it works fine. The image is the height of the container with rounded corners - of course it looks really skinny! — A Haworth, Oct 26 '22 at 21:48
I didn’t set a static width or height for the parent container, just used viewport units as a demo, so I’m afraid I still don’t get your point. — A Haworth, Nov 07 '22 at 17:01

score 3 · Accepted Answer · edited Jul 24 '21 at 17:10

As commented, setting max-width and max-height seems to be what you need or expect:

div {
  margin: auto;
  width: 90vw;
  height: 70vh;
  display:grid;

  background-color: DeepSkyBlue;
}

img {
  max-width: 100%;
  max-height: 100%; 
  margin:auto;/* x,y center if inside a grid or flex box */
 
  object-fit: contain;/* useless by now, img should keep its ratio */
  border-radius: 50px;
  border-radius: calc( 5vw + 5vh); /* will scale, maybe you find this usefull */
  background-color: Crimson;
}

<div>
  <img src="https://images.freeimages.com/images/large-previews/773/koldalen-4-1384902.jpg">
</div>

It took adding the `margin: auto` for me. This retained the `border-radius`! — evolross, Oct 26 '22 at 21:38

Yadab Sd · Answer 3 · 2021-07-24T08:31:46.533

-4

Use object-fit: cover; instead of contain

edited Jul 24 '21 at 08:31

answered Jul 23 '21 at 17:45

Yadab Sd

591
4
9

This will add a crop on the image. – evolross Oct 26 '22 at 21:35

How can I use "object-fit: contain" in CSS and still have a border radius on the image?

3 Answers3