CSS使圆角成为具有百分比半径的圆答案

【问题标题】：CSS Make a rounded corner be a circle with percentage radiusCSS使圆角成为具有百分比半径的圆
【发布时间】：2017-11-02 11:23:48
【问题描述】：

我想为我的图像添加圆角。它们是 Bootstrap 4 响应式图像（使用 img-fluid 类），所以我不想使用 border-radius=15px 之类的东西，因为如果图像变得非常小（在小视口上），圆角会占据大部分图像，当图像非常大时，四舍五入几乎不会引起注意。

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

有没有办法对 Bootstrap 4 响应式图像的角进行圆角处理，使得圆角始终是圆形的，并且无论图像的纵横比如何，图像宽度或高度的比例始终相同？

我更愿意只使用 CSS。我可以使用 Javascript 来做到这一点，但在这个应用程序中我实际上只有三种不同的图像纵横比，所以只创建三个不同的类会更容易。

【问题讨论】：

不，你需要一个正方形来通过半径画一个圆。 objec-fit 可以帮助或将 svg 用作掩码，但只是猜测:)
你的意思是没有javascript？因为使用 javascript 是小菜一碟。
@JoostS 是的，我宁愿不使用 javascript。因为如果我必须使用 javascript，我最终会更容易为我将在实践中使用的三种不同宽高比的图像创建三个不同的类。
您可以毫无问题地在 javascript 中使用类。只需使用$('img.yourclass').each()。

标签： twitter-bootstrap css bootstrap-4

【解决方案1】：

一个 hacky 解决方案，但我们可以使用 CSS3 vw 或 viewport width 来实现接近你想要的东西。 border-radius:5vw; 将根据视口的总宽度减少或增加 %。

图像的大小 与视口无关。但是你仍然可以得到很好的结果。

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

&lt;div&gt;&lt;/div&gt;

我建议你只使用 JS。

【讨论】：

我想这在技术上是最接近我想要的选择，但我的图像是响应式的并且可以随视口缩放，所以这不会真正起作用。我最终只使用了border-radius: 15%/10.1%;，然后根据需要为我的 3 个不同尺寸的图像中的每一个调整纵横比。如果我需要它来处理任意大小的图像，我将不得不使用 javascript。

【解决方案2】：

Javascript 解决方案

在一些 javascript (jQuery) 的帮助下，这是 15% 的边框半径：

$(window).resize( function() {
    $('img').each(function(){
       $(this).css('border-radius',($(this).width()*0.15)+'px');
    });
});
$(document).ready( function() {
  $(window).resize();
});

https://codepen.io/anon/pen/mqepMQ

PS。我会使用 CSS 为图像添加一个“标准”边框半径（例如“30px”），以便在$(document).ready() 启动之前图像看起来大致正确。

非javascript解决方案

将图片包裹在一个容器中，使用图片上的before和after伪元素，容器在图片上叠加4个圆角图片。这假定并要求背景是纯色。这些图像（最好是 SVG）应该/是正方形，所以很容易通过调整它们的宽度来调整它们的大小。该宽度可以相对于图像宽度进行设置（通过使用百分比）。

我个人认为这个解决方案相当混乱，因为额外的 DOM 元素和具有固定背景颜色的图像。我会选择 javascript 解决方案，因为它很简单。

【讨论】：