Imagem dentro de div com borda extrapolando

1 resposta
G

Seguinte, eu acho que é meio difícil explicar o que eu quero, então eu vou mostrar por imagens:

1 - eu tenho a seguinte div com BORDAS ARREDONDADAS:
[IMG]http://i56.tinypic.com/slkvft.jpg[/IMG]

considerem a parte BRANCA como sendo TRANSPARENTE, e a parte amarela o BACKGROUND da página, ou seja, a DIV é transparente e no lugar do branco seria o background...

2 - eu tenho varias imagens tipo essa, todas do mesmo tamanho e com o fundo variando de cor:

[IMG]http://i54.tinypic.com/2qnsarq.jpg[/IMG]

2 - e eu quero colocar a imagem DENTRO da div, porém, a imagem ocuparia TODA a div. Só que as imagens não tem as bordas arredondadas, logo, ela extrapolaria a div, e eu queria saber se tem um jeito de ficar mais ou menos assim:

[IMG]http://i53.tinypic.com/1jvxjn.jpg[/IMG]

Meu código da div:

.divArredondada{
	border:5px #A5241C solid;
	border-radius:20px; 
	-moz-border-radius:20px; 
	-webkit-border-radius:30px;
	width:150px;
	height:118px;
	margin-left:40px;
}

e a utilização:

<div class="divArredondada">
    <div>
          <a href="index.php?secao=produtos&subsecao=<?php echo $subsecao ?>&prod=<?php echo $res['id']?>"> 
              <img src="<?php echo $imagem ?>" width="150px" height="118px">
          </a>
    </div>
</div>

as imagens tem o mesmo tamanho, 150px por 118px

1 Resposta

G

opa, consegui resolver colocando a imagem como background da div
http://stick.gk2.sk/blog/2009/03/image-with-rounded-corners-using-css3/

Criado 16 de janeiro de 2011
Ultima resposta 16 de jan. de 2011
Respostas 1
Participantes 1