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

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="http://imgs.ntdtv.com/pic/2018/1-23/p8651401a412676208.jpg">
</div>

您可以在调整视口大小时检查它是如何工作的。

那么，有没有办法让图像元素在两个方向上调整其边框的大小以适应容器，就像object-fit那样？

或者也许是一种在图像内容上应用“裁剪四舍五入的矩形过滤器”的方法？

Answer 1

我也遇到过这个问题，并且我已经找到了解决方法。如果将高度和宽度设置为 auto，img 元素将保持其纵横比并且图像会触及边框。然后，您可以使用 max-width 和 max-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 的中心，因为现在如果它小于最大尺寸，它将移动到左上角。

Answer 2

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

在这个问题的另一个答案中，图像视图不会增长到“接触”父容器，从而在所有 4 个方向上在其周围留下空白区域，并在容器中心的某处保持较小。这意味着它的行为方式不同，因为问题中的代码元素img采用整个父区域，然后图片内容“拉伸”以接触最近的边框object-fit: contain。