对象拟合的图像圆角问题：包含

Question

我想展示一张圆角的图片。所以图像必须拉伸到容器但不裁剪任何部分，如object-fit: contain。但是，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%;
}

<div>
  <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg">
</div>

您可以在调整视口大小时检查它的工作原理。

那么，有没有办法让图像元素在双向调整其边框以适应容器，就像object-fit 一样？

或者也许是一种在图像内容上应用“crop-by-rounded-rect filter”的方法？

Answer 1

经过一些研究，这似乎在纯 CSS 中是不可能的。答案here 也证实了这一点。

在这个问题的other answer 中，图像视图没有增长到“触摸”父容器，因此在所有 4 个方向上在它周围留下了空白区域，并且在容器中心的某个地方保持很小。这意味着它的行为方式不同，因为问题中的代码 img 元素占据了整个父区域，然后图片内容“拉伸”以触及最近的边界与 object-fit: contain。

Answer 2

我也遇到过这个问题，我找到了解决方法。如果将高度和宽度设置为自动，则 img 元素会保持其纵横比，并且图像会接触边框。然后，您可以使用 max-width 和 max-height 而不是 width 和 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%);
}

您可能还必须像现在一样将 img 放在父 div 上，如果它小于将移动到左上角的最大尺寸。