¿Cómo evito que una imagen desborde un recuadro de esquina redondeado con CSS3?

Question

Si utilizo este código, la imagen no se recorta por las div de esquinas redondeadas (resultando en esquinas cuadradas de la imagen que cubren hasta redondeadas queridos de la div):

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

¿Alguien sabe cómo conseguir un Corder redondeada div para evitar que una imagen de un niño se desborde?

Answer 1

Esto puede o no funcionar en su caso, pero considere hacer de la imagen un fondo de CSS. En FF3, el siguiente funciona bien:

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

No estoy seguro de que hay otra solución — si aplica un borde a la imagen en sí (por ejemplo, 1em de profundidad), se obtiene el mismo problema de esquinas cuadradas.

Editar: aunque, en la "adición de un borde a la imagen" caso, la inserción de la imagen es correcta, es sólo que la imagen no esté al ras con el elemento div. Para verificar los resultados, agregue style="border:1em solid black;border-radius:1em;-moz-border-radius:1em;" a la etiqueta img (con width y height establecidos de forma adecuada, si es necesario).

Answer 2

Si convierte la imagen en una imagen de fondo en lugar de contenido, la imagen no recortará las esquinas redondeadas (al menos en FF3).

También podría agregar un relleno al divisor, o margen para que la imagen agregue espacio extra entre el borde redondeado y la imagen.

Answer 3

es necesario especificar una anchura exacta y heigth con overflow: hidden, si desea que su div para recortar su imagen

Answer 4

Incluso cuando overflow se establece en hidden, border-radius no recorta su contenido. Esto es por diseño.

Una solución sería establecer border-radius en la imagen y su contenedor.

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

Otra forma sería la de establecer la imagen como el fondo del recipiente usando background-image; pero hay problemas con este método en Firefox antes de la versión 3 (ver this bug), no es que eso te moleste demasiado.

Answer 5

Pruebe esta solución:

1. La imagen en img etiqueta está presente y hay que ajustar la anchura y la altura.
2. Luego, escóndalo con visibility:hidden. El ancho y la altura permanecen intactos.
3. Después de eso, configurará la misma fuente que la imagen de fondo y se recortará.

<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 6

Mi última Chrome, Firefox y Safari clip de la imagen a la frontera de radio del contenedor (como estaba previsto).

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

En Firefox 15, veo la imagen recortada cuando el contenedor tiene {overflow: hidden}. (Recorte de contenido infantil parece haber sido added in Gecko 2.0.)

En Chrome 23 & Safari 5, veo la imagen recortada única cuando el contenedor tiene {position: static; overflow: hidden} y la imagen tiene {position: static}.

Answer 7

Un simple border-radius en la etiqueta img funciona bien en las versiones actuales de Safari 5, Chrome 16, Firefox 9:

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

Answer 8

Creo que este problema se produce cuando la imagen o el padre la imagen es position: absolute. Esto es comprensible ya que la configuración absoluta elimina el elemento del flujo del documento.

estoy 90% seguro de que he visto una solución para esto, voy a actualizar este post cuando lo haga: D

Answer 9

También hay ahora fondo-clip en CSS3. Funciona en todos los principales navegadores. Las opciones son border-box, padding-box y content-box. En tu caso, creo que querrás usar padding-box.

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

Answer 10

El recorte adicional generalmente está dentro del margen de error del grosor del borde. Simplemente deja que el radio interior sea ligeramente más pequeño de manera que el margen de error cae bajo la frontera en lugar de al lado es

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