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

Question

如果我使用此代码,图像不会被div的圆角修剪(导致图像的方角覆盖div的圆角):

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

有谁知道如何获得圆角corder div以防止儿童图像溢出？

Answer 1

我最新的Chrome,Firefox和Safari会将图像剪切到容器的border-radius(按预期).

http://jsfiddle.net/RQYnA/12/embedded/result/

在Firefox 15中,我看到容器具有剪裁的图像{overflow: hidden}.(Gecko 2.0中似乎添加了剪辑子内容.)

在Chrome 23和Safari 5中,我看到只有在容器{position: static; overflow: hidden}和图像有图像时才会剪切图像{position: static}.

Answer 2

这可能适用于您的情况,也可能不适用,但请考虑将图像作为CSS背景.在FF3中,以下工作正常:

<div style="
  background-image:   url(big-image.jpg);
  border-radius:      1em;
  height:             100px;
  -moz-border-radius: 1em;
  width:              100px;"
></div>

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

编辑:虽然,在"为图像添加边框"的情况下,图像插图是正确的,只是图像不与div元素齐平.要查看结果,请添加style="border:1em solid black;border-radius:1em;-moz-border-radius:1em;"到img标记(如有必要,使用width并进行height相应设置).

Answer 3

即使overflow设置为hidden，border-radius也不会剪辑其内容。这是设计使然。

一种解决方案是border-radius在图像及其容器上进行设置。

<div style="border-radius: 16px; ...">
    <img src="big-image.jpg" style="border-radius: 16px; ..." />
</div>

另一种方法是使用background-image;将图像设置为容器的背景。但是在版本 3 之前的 Firefox 中，此方法存在问题（请参阅此错误）- 不需要过多打扰您。