如何防止图像溢出带有CSS3的圆角框?

If I use this code, the image isn't clipped by the div's rounded corners (resulting in the image's square corners covering up the div's rounded ones):

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

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

Does anyone know how to get a rounded corder div to prevent a child image from overflowing?

有没有人知道如何获得一个圆形的corder div以防止子图像溢出?

10 个解决方案

#1

This may or may not work in your situation, but consider making the image a CSS background. In FF3, the following works just fine:

这在您的情况下可能有效，也可能无效，但是请考虑将图像设置为CSS背景。在FF3中，以下方法非常有效:

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

I'm not sure there's another workaround — if you apply a border to the image itself (say, 1em deep), you get the same problem of square corners.

我不确定是否有另一个变通方法——如果你将一个边界应用到图像本身(比如，1em deep)，你就会得到同样的正方形边角问题。

Edit: although, in the "adding a border to the image" case, the image inset is correct, it's just that the image isn't flush with the div element. To check out the results, add style="border:1em solid black;border-radius:1em;-moz-border-radius:1em;" to the img tag (with width and height set appropriately, if necessary).

编辑:虽然在“向图像添加边框”的情况下，图像嵌入是正确的，但只是图像没有与div元素齐平。要检查结果，在img标签上添加style="border:1em solid black;border-radius -border-radius -border-radius -radius -radius -radius - 1em;

#2

My latest Chrome, Firefox, and Safari clip the image to the container's border-radius (as intended).

我最新的Chrome、Firefox和Safari将图像剪辑到容器的边界半径(如预期的那样)。

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

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

In Firefox 15, I see the image clipped when the container has {overflow: hidden}. (Clipping of child content seems to have been added in Gecko 2.0.)

在Firefox 15中，我看到当容器有{overflow: hidden}时图像被剪切。(在Gecko 2.0中似乎添加了对儿童内容的剪切。)

In Chrome 23 & Safari 5, I see the image clipped only when the container has {position: static; overflow: hidden} and the image has {position: static}.

在Chrome 23和Safari 5中，只有当容器具有{position: static;溢出:隐藏}，图像有{位置:静态}。

#3

Even when overflow is set to hidden, border-radius does not clip its content. This is by design.

即使将溢出设置为隐藏，border-radius也不会裁剪它的内容。这是通过设计。

One solution would be to set border-radius on the image as well as its container.

一种解决方案是在图像及其容器上设置边界半径。

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

Another way would be to set the image as the background of the container using background-image; but there are issues with this method in Firefox before version 3 (see this bug) - not that that need bother you too much.

另一种方法是使用背景图像将图像设置为容器的背景;但是在第3版之前，Firefox中存在这个方法的问题(请参阅这个bug)——这并不会给您带来太多麻烦。

#4

Try this workaround:

试试这个方法:

1. The image in img tag is present and there you set the width and height.
2. img标签中的图像是存在的，你在那里设置宽度和高度。
3. Then hide it with visibility:hidden. The width and height stay intact.
4. 然后把它隐藏起来。宽度和高度保持不变。
5. After that you'll set the same source as background image an it will clipped.
6. 之后，您将设置与背景图像相同的源，它将被剪切。

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

#5

There is also now background-clip in css3. It works in all the major browsers. The options are border-box, padding-box and content-box. In your case, I think you'll want to use padding-box.

css3中也有背景剪辑。它适用于所有主流浏览器。选项是边框框、桨框和内容框。就你的情况而言，我想你会想用球拍。

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

#6

If you make the image a background image instead of contents, the image won't clip the rounded corners (at least in FF3).

如果您将图像作为背景图像而不是内容，那么图像将不会裁剪圆角(至少在FF3中是这样)。

You could also add a padding to the div, or margin for the image to add extra padding between the rounded border and the image.

您还可以向div添加一个内边距，或者让图像在圆形边框和图像之间添加额外的内边距。

#7

A simple border-radius on the img tag works fine in current versions of Safari 5, Chrome 16, Firefox 9:

img标签上的一个简单的边界半径在当前版本的Safari 5、Chrome 16、Firefox 9中运行良好:

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

#8

I think this problem occurs when the image or the image's parent is position:absolute. This is understandable as setting absolute takes the element out of the flow of the document.

我认为当图像或图像的父结点是位置时就会出现这个问题:绝对。这是可以理解的，因为设置absolute将元素从文档流中取出。

I'm 90% sure I've seen a fix for this, I'll update this post when I do:D

我90%的确信我已经看到了一个修复，我会更新这篇文章当我做:D

#9

The extra cropping is usually only within the margin of error of the border thickness. Just let the inner radius be slightly smaller so that the margin of error falls under the border instead of next to is

额外的种植通常只在边界厚度的误差范围内。让内部半径稍微小一点，这样误差的范围就会落在边框下面而不是旁边

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

#10

You need to specify an exact width and heigth with overflow:hidden, if you want your div to clip your image

您需要指定一个确切的宽度和带有overflow:hidden的heigth，如果您想要您的div剪辑图像