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}时剪裁的图像。（剪切儿童内容似乎是added in Gecko 2.0.）

在Chrome 23＆amp; 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中存在这种方法的问题（参见this bug） - 不是那个需要打扰太多的。

Answer 4

尝试此解决方法：

img标记中的图片存在，您可以设置宽度和高度。
然后使用visibility:hidden隐藏它。宽度和高度保持不变。
之后，您将设置与背景图像相同的源，并将其剪裁。

<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;}

Answer 5

现在css3中也有背景剪辑。它适用于所有主流浏览器。选项包括边框，填充框和内容框。在你的情况下，我认为你会想要使用填充框。

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

Answer 6

如果您将图像设为背景图像而不是内容，则图像不会剪切圆角（至少在FF3中）。

您还可以在div中添加填充或图像的边距，以在圆角边框和图像之间添加额外的填充。

Answer 7

border-radius标记上的简单img在当前版本的Safari 5，Chrome 16，Firefox 9中运行良好：

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

Answer 8

我认为当图像或图像的父级位置为绝对时会出现此问题。这是可以理解的，因为设置绝对值会使元素脱离文档流。

我90％肯定我已经看到了解决此问题的方法，当我这样做时我会更新这篇文章：D

Answer 9

额外裁剪通常仅在边界厚度的误差范围内。只是让内半径略小，以便误差范围落在边界下而不是下边是

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

Answer 10

如果你想让你的div剪辑你的图像，你需要指定溢出的精确宽度和高度：隐藏

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

10 个答案: