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

Question

如果我使用这段代码，图像不会被div的圆角裁剪（导致图像的方角覆盖了div的圆角）：

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

有人知道如何获取圆角div，以防止子图像溢出吗？

- AlexWalker

---

现在我的最新版Chrome，Firefox和Safari中，角落剪辑图像的效果已经按预期实现：http://codepen.io/anon/pen/gzDmL - sam

Answer 1

我的最新版Chrome、Firefox和Safari会将图像剪裁为容器的边框半径（正如预期的那样）。

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

在Firefox 15中，当容器具有{overflow: hidden}时，我看到图像被剪裁。（子内容的剪裁似乎已经在Gecko 2.0中添加。）

在Chrome 23和Safari 5中，我只看到当容器具有{position: static; overflow: hidden}并且图像具有{position: static}时，图像被剪裁。

- sam

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元素不对齐。 要查看结果，请在img标记中添加style="border:1em solid black;border-radius:1em;-moz-border-radius:1em;"（如果需要，设置width和height）。

- kyle

---

是的，看起来这个可以工作。不幸的是，溢出在非边框半径样式的div上不能像预期的那样工作。 - Bret Walker

与背景图像和边框相关（特别是非不透明边框）：MDN： https://developer.mozilla.org/en-US/docs/CSS/background-clip 其中指出：“Internet Explorer 7，但不包括其他版本的Internet Explorer，如果overflow：hidden | auto | scroll，则会像background-clip：padding一样运行。”w3c CSS背景和边框候选推荐规范（http://www.w3.org/TR/css3-background/#the-background-clip）。 - mwolfetech

将图像作为背景添加会改变图像的语义含义，并由浏览器后加载。 - kvetis

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 将图像设置为容器的背景；但是在 Firefox 3 版本之前存在问题（请参见此错误）- 不过这并不会太困扰您。

- Alex Barrett

---

我不相信在FF3或Safari 4中使用-moz和-webkit前缀的border-radius对图像有影响。 - Bret Walker

当图像比div更大时，这种情况会导致您首先想要剪辑图像，但是这也不起作用。如果这是设计上的问题，那么对我来说似乎是糟糕的设计。或者有没有一些隐藏的好处使得剪辑失败？ - iconoclast

我认为这不是设计上的问题。http://dev.w3.org/csswg/css3-background/#corner-clipping 上说：“其他剪裁到边框或填充边缘的效果（如‘overflow’而非‘visible’）也必须剪裁到曲线。” - sam

Answer 4

现在CSS3中还有background-clip属性。它可以在主流浏览器中使用。选项有border-box、padding-box和content-box。在您的情况下，我认为您需要使用padding-box。

-webkit-background-clip: padding-box;
-moz-background-clip:    padding; 
background-clip:         padding-box;

- thomasrye

---

我喜欢那个。=] - giovannipds

Answer 5

尝试这个解决方法：

1. img 标签中有图像，并设置了宽度和高度。
2. 然后使用 visibility:hidden 将其隐藏。宽度和高度保持不变。
3. 之后将相同的源设置为背景图像，它将被剪辑。

<a class="thumb" href="#" style="background-image: url('./img/pic1.jpg');" title="Picture">
  <img border="0" src="./img/pic1.jpg" alt="Pic" height="100" width="150" />
</a>

#page .thumb {
background-repeat: no-repeat;
background-position: left top;
border: 3px #e5dacf solid;
display: block;
float: left;}

#page .thumb img {
display: block;
visibility: hidden;}

- Gabox

Answer 6

在当前版本的Safari 5、Chrome 16、Firefox 9中，img标签上简单的border-radius效果良好：

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

- Nick

Answer 7

额外裁剪通常仅在边框厚度的误差范围内进行。只需让内半径略小即可，以便误差范围落在边框下方而不是旁边。

<div style='border-radius:5px;border:thin solid 1px;'>
   <img style='border-radius:4px' />
</div>

- Matt Cook

Answer 8

如果你把图片作为背景图片而不是内容，那么在Firefox3中它不会剪裁圆角。

你也可以在div上添加padding，在图片上添加margin来增加圆边框和图片之间的额外空间。

- Illandril

Answer 9

我认为这个问题发生在图像或图像的父元素是position:absolute时。这是可以理解的，因为设置绝对定位会将元素从文档流中移除。

我90%确定我已经看到了解决方法，如果我找到了，我会更新这篇文章:D

- Brad

Answer 10

如果你想让你的 div 裁剪图片，你需要使用 overflow:hidden 并指定精确的宽度和高度。

- Barbaros Alp