Question

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

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

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

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

Answer 1

一个hacky解决方案，但我们可以使用CSS3 vw或viewport width来达到您想要的效果。 border-radius:5vw;将根据视口的总宽度减少或增加％。

图像的大小与视口无关。但是你可以得到相当不错的结果。

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

我建议您只使用JS。

Answer 2

Javascript解决方案

这是你的15％边界半径借助一些javascript（jQuery）：

$(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。我会添加一个标准＆＃39;使用CSS对图像进行边界半径（例如＆＃39; 30px＆＃39;），以便在$(document).ready()开始之前图像看起来大致正确。

非JavaScript解决方案

将图像包装在容器中，并使用图像和容器上的前后伪元素在图像上叠加4个圆角图像。这假定并要求背景是纯色。这些图像（最好是SVG）应该是正方形，因此很容易通过操纵它们的宽度来确定它们的大小。可以相对于图像宽度设置此宽度（使用百分比）。

就我个人而言，由于额外的DOM元素和具有固定背景颜色的图像，我认为这个解决方案非常混乱。我会选择javascript解决方案，因为它简单。

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

2 个答案: