html - 对象适合 : contain 的图像圆 Angular 问题

Question

我想显示一张带有圆 Angular 的图片。因此图像必须拉伸(stretch)到容器但不裁剪任何部分，如 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>

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

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

或者可能是一种在图像内容上应用“按圆 Angular 矩形裁剪过滤器”的方法？

Answer 1

我也遇到过这个问题，我找到了解决办法。如果将高度和宽度设置为自动，则 img 元素会保持其纵横比并且图像会触及边框。然后，您可以使用最大宽度和最大高度来代替宽度和高度。

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 的中心，如果它小于最大尺寸，它将移至左上角。