Проблема с закругленными углами изображения при подгонке объекта: содержат ⇐ Html

[Anonymous]

Я хочу показать изображение с закругленными углами. Таким образом, изображение должно растягиваться до контейнера, но не обрезать какую-либо часть, как, например, object-fit: contains. Однако border-radius применяется к элементу изображения, а не к содержимому изображения. Вот пример (также JSFiddle):

Код: Выделить всё

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

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

img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 20%;
}

Код: Выделить всё

[img]https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg[/img]

Вы можете проверить, как это работает, изменив размер области просмотра.
Итак, есть ли способ заставить элемент изображения изменять размеры своих границ в обоих направлениях, чтобы приспособиться к контейнеру, как это делает функция object-fit?
Или, может быть, способ применить "фильтр обрезки по округленному прямоугольнику" для содержимого изображения?

Подробнее здесь: https://stackoverflow.com/questions/495 ... it-contain