'Image rounded corners issue with object-fit: contain

I want to show an image with rounded corners. So the image must stretch to the container but doesn't crop any part, like object-fit: contain. However, border-radius applies to image element, not the picture content. Here is an example (also JSFiddle):

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
}

div {
  width: 100%;
  height: 100%;
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 20%;
}
<div>
  <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg">
</div>

You can check how it works when you resize the viewport.

So, is there a way to make the image element resize it's borders in both directions to adjust to the container, just like object-fit does?

Or maybe a way to apply a "crop-by-rounded-rect filter" on the image content?

htmlcss


Solution 1:[1]

After some research it seems like this is not possible in pure CSS. The answer here also confirms that.

In the other answer of this question the image view is not growing to "touch" the parent container thus leaving empty area around it in all 4 directions and staying small somewhere centered in the container. Which means it doesn't behave the same way, as the code in the question with img element taking the whole parent area and then picture content "stretched" to touch the closest borders with object-fit: contain.

Solution 2:[2]

I've also had this problem and I've found a way to do it. If you set the height and width to auto the img element maintains its aspect ratio and the image touches the borders. You can then use max-width and max-height instead of width and height.

img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 20%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

You may also have to center the img on the parent div as now if it's smaller than the maximum size it will move to the top left.

Solution 3:[3]

Here is a solution that will fit the image when the container is smaller:

div {
  display: flex;
  align-items: center;
  justify-content: center;
}

img {
  border-radius: 16px;
  max-width: 100%;
  max-height: 100%;
}

If the container is bigger than the image it will just center it. Note that you probably don't wanna stretch the image at this point or it will look bad

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 frangulyan
Solution 2 Mestik 78
Solution 3 D0m3

Related Questions