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

问题描述

如果我使用此代码，图片不会被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>

有人知道如何获得圆润的corder 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 元素。要检查结果，请将<$ c> style =border：1em solid black; border-radius：1em; -moz-border-radius：1em;添加到 img 标记（如果需要，适当地设置 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).

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