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

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

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

我最新的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}.

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

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

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