Question

我想要显示带圆角的图像。因此，图像必须伸展到容器，但不会裁剪任何部分，例如object-fit: contain。但是，border-radius适用于图像元素，而不适用于图片内容。这是一个例子（也是JSFiddle）：

＆＃13;

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
}

div {
  width: 100%;
  height: 100%;
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 20%;
}

＆＃13;

<div>
  <img src="http://imgs.ntdtv.com/pic/2018/1-23/p8651401a412676208.jpg">
</div>

＆＃13;

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

那么，有没有办法让图像元素调整它的边界两个方向来调整容器，就像object-fit一样？

或者也许是一种应用＆＃34;逐个过滤的过滤器＆＃34;关于图像内容？

Answer 1

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

在这个问题的other answer中，图片视图没有增长到＆＃34;触摸＆＃34;父容器因此在所有4个方向中留下空白区域并且在容器中心的某处保持小。这意味着它的行为方式不同，因为img元素的问题中的代码占据整个父区域，然后是图片内容＆＃34;拉伸＆＃34;用object-fit: contain触及最近的边框。

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

1 个答案: