Image rounded corners issue with object-fit: contain - html

Question

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?

Answer 1

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.

Answer 2

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.

Answer 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