Como posso evitar que uma imagem de transbordar uma caixa de canto arredondado?

Question

Se eu usar esse código, a imagem não é cortada por cantos arredondados do div (resultando em cantos quadrados da imagem que cobre até os arredondados do div):

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

Alguém sabe como obter uma div corder arredondada para evitar uma imagem de criança de transbordar?

Answer 1

Isto pode ou não pode trabalhar em sua situação, mas considere fazer a imagem de fundo CSS. No FF3, a seguir funciona muito bem:

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

Eu não estou certo que há outra solução -. Se você aplicar uma borda para a imagem em si (por exemplo, 1em de profundidade), você tem o mesmo problema de cantos quadrados

Editar: , embora, no "adicionar uma borda à imagem" caso a inserção imagem é correta, é apenas que a imagem não fique nivelada com o elemento div. Para verificar os resultados, adicione style="border:1em solid black;border-radius:1em;-moz-border-radius:1em;" ao tag img (com width e conjunto height de forma adequada, se necessário).

Answer 2

O meu mais recente Chrome, Firefox e Safari cortar a imagem para border-radius do recipiente (como pretendido).

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

No Firefox 15, vejo a imagem cortada quando o recipiente tem {overflow: hidden}. (Clipping de conteúdo filho parece ter sido adicionado no Gecko 2.0. )

No Chrome 23 & Safari 5, vejo a imagem cortada única quando o recipiente tem {position: static; overflow: hidden} ea imagem tem {position: static}.

Answer 3

Mesmo quando overflow está definido para hidden, border-radius não cortar o seu conteúdo. Isso ocorre por design.

Uma solução seria a criação border-radius na imagem, bem como o seu recipiente.

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

Outra forma seria a de definir a imagem como fundo do recipiente utilizando background-image; mas há problemas com este método no Firefox antes versão 3 (ver este bug .) - não que isso precisa incomodá-lo muito

Answer 4

Tente esta solução alternativa:

1. A imagem na tag img está presente e lá você definir a largura e altura.
2. Em seguida, escondê-lo com visibility:hidden. A largura ea altura estadia intacta.
3. Depois que você vai definir a mesma fonte imagem de fundo como uma vai cortada.

<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

Há também agora background-clip no CSS3. Ele funciona em todos os principais navegadores. As opções são border-box, padding-caixa e conteúdo de caixa. No seu caso, eu acho que você vai querer usar padding-caixa.

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

Answer 6

Se você tornar a imagem uma imagem em vez de conteúdos fundo, a imagem não vai cortar os cantos arredondados (pelo menos em FF3).

Você também pode adicionar um padding ao div, ou margem para a imagem para adicionar cobertura extra entre a fronteira arredondado e da imagem.

Answer 7

Um simples border-radius na etiqueta img funciona bem em versões atuais do Safari 5, Chrome 16, Firefox 9:

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

Answer 8

Eu acho que esse problema ocorre quando a imagem ou o pai da imagem é position: absolute. Isso é compreensível, como a definição absoluta leva o elemento fora do fluxo do documento.

Estou 90% certo que eu vi uma correção para isso, eu vou atualizar este post quando eu faço: D

Answer 9

O corte extra é geralmente apenas dentro da margem de erro da espessura da borda. Apenas deixe o raio interno ser um pouco menor para que a margem de erro cai sob a fronteira em vez de ao lado seja

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

Answer 10

Você precisa especificar uma largura exata e altura com overflow: hidden, se você quiser que o seu div para cortar sua imagem