¿Cómo puedo evitar que una imagen se desborde una caja de esquina redondeada?

Question

Si utilizo este código, la imagen no es recortado por las div de esquinas redondeadas (resultando en esquinas cuadradas de la imagen que cubren hasta los redondeados 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 div Corder redondeada para evitar que la imagen de un niño se desborde?

Answer 1

Esto puede o no puede trabajar en su situación, pero considerar la posibilidad de la imagen de fondo 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 si bien, en el "añadir 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 comprobar los resultados, añadir style="border:1em solid black;border-radius:1em;-moz-border-radius:1em;" a la etiqueta img (con width y height configurar adecuadamente, si es necesario).

Answer 2

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 niño parece haber sido añadido en Gecko 2.0. )

En Chrome 23 & Safari 5, I ver la imagen recortada solamente cuando el recipiente tiene {position: static; overflow: hidden} y la imagen tiene {position: static}.

Answer 3

Aún 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, así como 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 (véase este error ) - no es que esa necesidad se molesta demasiado

.

Answer 4

Trate de esta solución:

1. La imagen en la etiqueta img está presente y no se ajusta el ancho y la altura.
2. A continuación ocultarlo con visibility:hidden. La anchura y altura permanecen intactos.
3. Después de que usted va a configurar el mismo origen de la imagen de fondo como se va recortado.

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

También hay ahora fondo-clip en CSS3. Funciona en todos los principales navegadores. Las opciones son frontera-box, el relleno de la caja y el contenido de la caja. En su caso, pienso que usted quiere utilizar el relleno de la caja.

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

Answer 6

Si realiza la imagen de una imagen de fondo en lugar de los contenidos, la imagen no va a cortar las esquinas redondeadas (al menos en FF3).

También se puede añadir un relleno para el div, o el margen de la imagen para añadir relleno adicional entre el borde redondeado y la imagen.

Answer 7

A border-radius simple 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 toma el elemento fuera 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

El recorte adicional es por lo general sólo 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 está

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

Answer 10

Es necesario especificar una anchura y la altura exacta con overflow: hidden, si desea que su div para recortar la imagen