elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado:


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  imagen con borde hasta convertirse en circulo
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: imagen con borde hasta convertirse en circulo  (Leído 2,772 veces)
basickdagger


Desconectado Desconectado

Mensajes: 650


System.out.println("this is weird as fuck");


Ver Perfil
imagen con borde hasta convertirse en circulo
« 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!


En línea

T. Collins

Desconectado Desconectado

Mensajes: 206


Ver Perfil
Re: imagen con borde hasta convertirse en circulo
« Respuesta #1 en: 25 Noviembre 2014, 01:21 am »

http://www.html5rocks.com/en/tutorials/masking/adobe/ o si no con php.


« Última modificación: 25 Noviembre 2014, 01:29 am por T. Collins » En línea

basickdagger


Desconectado Desconectado

Mensajes: 650


System.out.println("this is weird as fuck");


Ver Perfil
Re: imagen con borde hasta convertirse en circulo
« Respuesta #2 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  :-\


En línea

basickdagger


Desconectado Desconectado

Mensajes: 650


System.out.println("this is weird as fuck");


Ver Perfil
Re: imagen con borde hasta convertirse en circulo
« Respuesta #3 en: 25 Noviembre 2014, 01:38 am »


voy a darle una hojeada... gracias
En línea

alan++

Desconectado Desconectado

Mensajes: 57


Ver Perfil
Re: imagen con borde hasta convertirse en circulo
« Respuesta #4 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
En línea

MinusFour
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.529


I'm fourth.


Ver Perfil WWW
Re: imagen con borde hasta convertirse en circulo
« Respuesta #5 en: 25 Noviembre 2014, 17:15 pm »

No necesitas especificar la mitad de los pixeles en forma absoluta puedes usar:

Código
  1. .circle {
  2.  border-radius: 50%;
  3. }

Tambien tienes SVG:

http://www.w3schools.com/svg/svg_circle.asp
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Tutorial Círculo transparente con BORDE
Diseño Gráfico
Sub_Cero 2 32,918 Último mensaje 23 Abril 2005, 16:43 pm
por Sub_Cero
texto sobre circulo
Diseño Gráfico
telurico 5 3,293 Último mensaje 6 Diciembre 2005, 19:56 pm
por + enrique ZP
Circulo de Oro 2006
Diseño Gráfico
Azielito 0 1,884 Último mensaje 20 Octubre 2006, 18:25 pm
por Azielito
[Imagen Enlace] Quiero que una imagen no tenga borde si la convierto en link.
Desarrollo Web
KuraraGNU 4 4,981 Último mensaje 11 Mayo 2011, 10:17 am
por KuraraGNU
JQuery imagen de espera hasta completar respuesta[SOLUCIONADO]
Desarrollo Web
Pablo Videla 0 3,607 Último mensaje 18 Noviembre 2011, 14:41 pm
por Pablo Videla
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines