CSS将圆角设为半径为百分比的圆

Question

我想为我的图像添加圆角.它们是Bootstrap 4响应式图像(有了这个类img-fluid),所以我不想使用类似的东西border-radius=15px,因为如果图像变得非常小(在一个小视口上),圆角会占据大部分图像,当图像非常大时,四舍五入几乎不可能.

我可以使用border-radius=15%;,但如果我的图像不是正方形,圆角是椭圆形而不是圆形.我可以解决这个问题border-radius=15%/10%;,但是我必须调整这个比例以匹配每个单独图像的宽高比.

有没有办法绕过Bootstrap 4响应图像的角落,这样圆角总是圆形的,并且无论图像的纵横比如何,图像宽度或高度的比例总是相同的？

我更喜欢用CSS做这件事.我可以使用Javascript来完成它,但是在这个应用程序中我只会有三种不同的图像宽高比,所以创建三个不同的类会更容易.

Answer 1

这是一个 hacky 解决方案，但我们可以使用 CSS3vw或视口宽度来实现接近您想要的效果。border-radius:5vw;将根据视口的总宽度减少或增加百分比。

图像的大小仅与视口无关。但你仍然可以获得相当不错的结果。

div{
  background-color:red;
  width:50%;
  height:100px;
  border-radius:5vw;
}

<div></div>

我建议你只使用 JS 来实现这一点。