Test Foro de elhacker.net SMF 2.1

Programación => Desarrollo Web => Mensaje iniciado por: basickdagger en 25 Noviembre 2014, 01:10 AM

Título: imagen con borde hasta convertirse en circulo
Publicado por: basickdagger en 25 Noviembre 2014, 01:10 AM
hola tengo bastantes imagenes las cuales voy a mostrar en forma de circulo
se que utilizando border-radius hasta la mitad de la anchura/altura logro hacerlo, el problema es que no todas las imagenes serán del mismo ancho/alto, por lo que no me serviria colocarle la propiedad en forma general al css..

alguna idea de como hacerlo?


saludos!
Título: Re: imagen con borde hasta convertirse en circulo
Publicado por: T. Collins en 25 Noviembre 2014, 01:21 AM
http://www.html5rocks.com/en/tutorials/masking/adobe/ (http://www.html5rocks.com/en/tutorials/masking/adobe/) o si no con php.
Título: Re: imagen con borde hasta convertirse en circulo
Publicado por: basickdagger en 25 Noviembre 2014, 01:30 AM
pero es aplicable a cuadrados, mi interes esta tambn en imagenes rectangulares aunque se pierda parte de la imagen, en realidad ese es mi duda.. si es posible detectar la imagen y aplicarle la propiedad dependiendo de su valor... de otro modo voy a tener q modificarles de una en una  :-\


Título: Re: imagen con borde hasta convertirse en circulo
Publicado por: basickdagger en 25 Noviembre 2014, 01:38 AM
Cita de: T. Collins en 25 Noviembre 2014, 01:21 AM
http://www.html5rocks.com/en/tutorials/masking/adobe/ (http://www.html5rocks.com/en/tutorials/masking/adobe/) o si no con php.

voy a darle una hojeada... gracias
Título: Re: imagen con borde hasta convertirse en circulo
Publicado por: alan++ en 25 Noviembre 2014, 14:25 PM
Yo alguna vez tuve que hacer algo similar...

Lo que podes hacer es aasignarle un ancho y alto establecido al contenedor, digamos 100px x 100px, una vez definas el tamaño del contenedor le aplicas el rendondeo border-radius:50%; con ambas garantizas el circulo, y para alinear la imagen podrias ubicarla y jugar con position:relative;

Espero que este claro, cualquier duda estoy para ayudarte
Título: Re: imagen con borde hasta convertirse en circulo
Publicado por: MinusFour en 25 Noviembre 2014, 17:15 PM
No necesitas especificar la mitad de los pixeles en forma absoluta puedes usar:

Código (css) [Seleccionar]

.circle {
  border-radius: 50%;
}


Tambien tienes SVG:

http://www.w3schools.com/svg/svg_circle.asp