Problem mit abgerundeten Bildecken bei object-fit: include ⇐ HTML

[Anonymous]

Ich möchte ein Bild mit abgerundeten Ecken anzeigen. Das Bild muss sich also bis zum Container erstrecken, schneidet aber keinen Teil ab, wie etwa object-fit: include. Der Randradius gilt jedoch für das Bildelement, nicht für den Bildinhalt. Hier ist ein Beispiel (auch JSFiddle):

Code: Select all

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

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

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

Code: Select all

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

Sie können überprüfen, wie es funktioniert, wenn Sie die Größe des Ansichtsfensters ändern.
Gibt es also eine Möglichkeit, die Größe der Ränder des Bildelements in beide Richtungen zu ändern, um sie an den Container anzupassen, so wie es die Objektanpassung tut?
Oder vielleicht eine Möglichkeit, eine anzuwenden „Crop-by-Rounded-Rect-Filter“ für den Bildinhalt?