一尘不染

如何防止图像溢出圆角框?

css

如果使用此代码,则div的圆角不会剪切图像(结果是图像的方形角覆盖了div的圆角):

<div style="border-radius: 1em; -moz-border-radius: 1em; -webkit-border-radius: 1em; overflow:hidden;">
    <img src="big-image.jpg" />
</div>

有谁知道如何获得一个圆形的div来防止子图像溢出?


阅读 319

收藏
2020-05-16

共1个答案

一尘不染

这可能会或可能不会在您遇到的情况下起作用,但请考虑使图像成为CSS背景。在FF3中,以下工作正常:

<div style =“
  背景图片:url(big-image.jpg);
  边界半径:1em;
  高度:100px;
  -moz-border-radius:1em;
  宽度:100像素;”
> </ div>

我不确定还有另一种解决方法-如果您对图像本身应用边框(例如,1em较深),则会遇到同样的方形角问题。

编辑: 尽管在“为图像添加边框”情况下,图像插图是正确的,只是图像与div元素不齐平。要检查结果,请添加style="border:1em solid black;border-radius:1em;-moz-border- radius:1em;"img标签中(使用widthheight根据需要进行适当设置)。

2020-05-16