如何防止图像溢出圆角框? [英] How do I prevent an image from overflowing a rounded corner box?

问题描述

如果我使用此代码，则div的圆角不会剪切图像(结果是图像的方形角覆盖了div的圆角):

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

有人知道如何获取圆整的div来防止子图像溢出吗?

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

推荐答案

在您遇到的情况下，这可能会或可能不会起作用，但请考虑将图像设为CSS背景.在FF3中，以下工作正常:

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

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

我不确定还有另一种解决方法—如果对图像本身应用边框(例如，1em深)，则会遇到同样的方形角问题.

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.

尽管在为图像添加边框"的情况下，图像插图是正确的，只是图像没有与div元素齐平.要检查结果，请在img标记中添加style="border:1em solid black;border-radius:1em;-moz-border-radius:1em;"(必要时对width和height进行适当设置).

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).

这篇关于如何防止图像溢出圆角框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！