Problemas con ocultar imagen de avatar en Opera

[gere88]

Hola gente, estoy terminando el diseño de los perfiles de mi foro y al querer ocultar parte de la imagen del avatar en Opera no se oculta, mientras que en Chrome si, eh buscado por todo lado y no encuentro solucion. Que podra ser? gracias de antemano.

Como se ve en Opera:

Como se ve en Chrome:

 

[Poka]

Quien usa opera...? Opera no distingue el overflow.


Saludos!

 

[gere88]

Quien usa opera...? Opera no distingue el overflow.


Saludos!

siempre alguno hay jaja. gracias por contestar!! vere que hago

 

[ecoal95]

Puedes pasar la URL? Opera con border-radius no cambia la forma del bloque (lo que no está especificado, así que no es un error). No obstante creo que lo que quieres hacer se puede conseguir de otra manera 😉

 

[gere88]

Puedes pasar la URL? Opera con border-radius no cambia la forma del bloque (lo que no está especificado, así que no es un error). No obstante creo que lo que quieres hacer se puede conseguir de otra manera 😉

Leistes el post? jeje el problema no es el radius, si ves en la imagen funciona en Opera. El problema es el overflow.

 

[ecoal95]

Leistes el post? jeje el problema no es el radius, si ves en la imagen funciona en Opera. El problema es el overflow.

Ya lo sé, no hablo por hablar. El problema es que la imagen está dentro de un div al que se le aplica el radius y el overflow, pero con padding + background-color + border + border-radius directamente sobre la imagen creo poder llegar al mismo efecto 😉

 

[Chapi]

El circulo que contiene la imagen es un div con un border-radius tal que queda de esa forma circular?
Nunca lo intente, pero si pones la imagen con display: block y le cambias el border-radius para hacerla circular, como queda?
Es una idea no mas, no se si se puede siquiera.

P.D: Acabo de probar con firebug en firefox, tomando una imagen de 200px*200px y poniendo un border-radius de 120px se logra un efecto similar a lo que queres hacer. La imagen se redondea sin deformarse, si no que se ocultan los vertices.
Si el div exterior lo logras de la forma descripta, entonces hacerlo asi te va a servir.

 

[gere88]

El circulo que contiene la imagen es un div con un border-radius tal que queda de esa forma circular?
Nunca lo intente, pero si pones la imagen con display: block y le cambias el border-radius para hacerla circular, como queda?
Es una idea no mas, no se si se puede siquiera.

P.D: Acabo de probar con firebug en firefox, tomando una imagen de 200px*200px y poniendo un border-radius de 120px se logra un efecto similar a lo que queres hacer. La imagen se redondea sin deformarse, si no que se ocultan los vertices.
Si el div exterior lo logras de la forma descripta, entonces hacerlo asi te va a servir.

Muchas gracias! ahora probare lo que dices, puediendo redondear u ocultar la sobra de la imagen ya quedaria. Saludos!

 

[Chapi]

Como quedo?

 

[gere88]

Como quedo?

En opera no funciona xD.

 

[ecoal95]

En opera no funciona xD.

Prueba con este código. Es lo que estaba diciendo antes, pero como nadie me contesta...

HTML:

<img class="decorada-sin-div-con-overflow" src="http://placekitten.com/200/200">
<!-- Reemplazar la url -->

CSS:

.decorada-sin-div-con-overflow {
	padding: 10px;
	border: 1px solid #aaa;
	box-shadow: 0 0 4px rgba(0,0,0,.3);
	/** border-radius: 50%; = círculo perfecto si la imagen es cuadrada */
	border-radius: 50%;
}

Hostia, si funciona en opera, tal y como todo dije! 😉 Por lo menos bajo ubuntu, pero fijo que en windows también