Html 如何防止图像溢出圆角框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/587814/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I prevent an image from overflowing a rounded corner box?
提问by Bret Walker
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来防止子图像溢出？
采纳答案by kyle
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, 1emdeep), you get the same problem of square corners.
我不确定是否有另一种解决方法 - 如果您将边框应用于图像本身（例如，1em深），您会遇到同样的方角问题。
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 divelement. To check out the results, add style="border:1em solid black;border-radius:1em;-moz-border-radius:1em;"to the imgtag (with widthand heightset appropriately, if necessary).
编辑：尽管在“向图像添加边框”的情况下，图像插入是正确的，只是图像与div元素不齐平。要查看结果，请添加style="border:1em solid black;border-radius:1em;-moz-border-radius:1em;"到img标签（如果需要，使用width和height适当设置）。
回答by sam
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 onlywhen the container has {position: static; overflow: hidden}and the image has {position: static}.
在 Chrome 23 和 Safari 5 中，我看到只有当容器具有{position: static; overflow: hidden}并且图像具有{position: static}.
回答by Alex Barrett
Even when overflowis set to hidden, border-radiusdoes not clip its content. This is by design.
即使overflow设置为hidden，border-radius也不会剪辑其内容。这是设计使然。
One solution would be to set border-radiuson the image as well as its container.
一种解决方案是border-radius在图像及其容器上进行设置。
<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.
另一种方法是使用background-image;将图像设置为容器的背景。但是在版本 3 之前的 Firefox 中，此方法存在问题（请参阅此错误）- 不需要过多打扰您。
回答by thomasrye
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 中现在也有背景剪辑。它适用于所有主要浏览器。选项是边框框、填充框和内容框。就您而言，我认为您会想要使用 padding-box。
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
回答by Gabox
Try this workaround:
试试这个解决方法：
- The image in
imgtag is present and there you set the width and height. - Then hide it with
visibility:hidden. The width and height stay intact. - After that you'll set the same source as background image an it will clipped.
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;}
回答by Nick
A simple border-radiuson the imgtag works fine in current versions of Safari 5, Chrome 16, Firefox 9:
标签border-radius上的简单img在当前版本的 Safari 5、Chrome 16、Firefox 9 中工作正常：
<div>
<img src="big-image.jpg" style="border-radius: 1em;" />
</div>
回答by Brad
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.
我认为当图像或图像的父级为 position:absolute 时会出现此问题。这是可以理解的，因为设置 absolute 会将元素从文档流中移除。
I'm 90% sure I've seen a fix for this, I'll update this post when I do:D
我 90% 确定我已经看到了解决此问题的方法，当我这样做时，我会更新这篇文章：D
回答by Illandril
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 添加内边距，或为图像添加边距以在圆角边框和图像之间添加额外的内边距。
回答by Matt Cook
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>
回答by Barbaros Alp
You need to specify an exact width and heigth with overflow:hidden, if you want your div to clip your image
您需要使用溢出指定确切的宽度和高度：隐藏，如果您希望您的 div 剪辑您的图像
