[SOLUCIONADO] imagenes con circulos perfectos css

[lexus]

Hola,

alguien me podria ayudar, los usuarios de mi sitio web suben sus fotos
y todas son de tamaños distintos (anchos o altos diferentes)

me gustaria poner las fotos en circulos perfectos
ya que como estoy intentando con border-ratio me quedan ovaladas
hay alguna forma de que siempre queden en circulos perfectos?


-webkit-border-radius: 800px;
-moz-border-radius: 800px;
border-radius: 800px;


gracias

[xfxstudios]

pues lo que debes hacer es colocar la foto como fondo de un div y a ese div darle el border-radius, y el fondo como cover, de esa manera todas las fotos van a tener una esfera perfecta, claro habria que ver como tienes estructurado el codigo y la lista de imagenes para hacer lo propio

Muestra: https://jsfiddle.net/xfxstudios/gmqnjfq6/

[lexus]

excelente tal cual como lo necesitaba

muchas gracias

[pzin]

Aunque esa es la forma fácil y rápida, también es la forma vaga y chapucera. Lo ideal sería que ajustaras la imagen en el momento de subirla. Porque de esa forma que te dicen, estás seguramente cargando más datos de los que vas a mostrar.

Lo que te interesa es que la imagen sea cuadrada. Entonces tienes que tratar la imagen para recortar las partes que sobren cuando el usuario sube la imagen. El caso ideal es que le dejes elegir al usuario qué parte se recortará.

Técnicamente no tiene mucho que ver con CSS, pero tu problema real tampoco es de CSS.

[xfxstudios]

bueno chapucera o no el chico necesita encerradas en un circulo, ademas tambien va a depender de la finalidad de la web, si amerita el recorte o no, pues hay usuarios que no les gusta recortar la imagen o no están buscando otro instagram por ejemplo. Claro esta que si las va a recortar para luego agregarles la clase css pues nada un poquito mas de trabajo y ya.

De igual manera la pregunta fue clara y esa seria la manera, si hay otra mucho mas estilizada y menos chapucera, pues aportala ya que estoy abierto a aprender mucho más, ademas no leí donde dice el que la imagen sea cuadrada, allí me perdí, pero bueno, quedo atento al aporte a ver en que cambia el asunto.

[pzin]

Iniciado por xfxstudios

bueno chapucera o no el chico necesita encerradas en un circulo, ademas tambien va a depender de la finalidad de la web, si amerita el recorte o no, pues hay usuarios que no les gusta recortar la imagen o no están buscando otro instagram por ejemplo. Claro esta que si las va a recortar para luego agregarles la clase css pues nada un poquito mas de trabajo y ya.

De igual manera la pregunta fue clara y esa seria la manera, si hay otra mucho mas estilizada y menos chapucera, pues aportala ya que estoy abierto a aprender mucho más

Entiendo que te pueda ofender que alguien te diga que algo es chapucero. Pero lo es. ¿Qué diferencia hay entre que se recorte la imagen al subirla o se recorte solo visualmente? Es una tontería. Es, a ojos del usuario, la misma cosa. Y aquí no se discute si el usuario prefiere una cosa u otra, porque si el usuario sube imágenes de cualquier tamaño y él quiere mostrarlas circularmente, obviamente sin deformarlas, entonces no está sobre la mesa hablar de las preferencias del usuario que, de todas formas, tanto la solución fácil como la buena, da el mismo resultado de cara al usuario. Pero haciéndolo bien se evita cargar datos no necesarios. Optimizar las cosas es lo que hace que una web cargue rápida o no.

Iniciado por xfxstudios

ademas no leí donde dice el que la imagen sea cuadrada, allí me perdí, pero bueno, quedo atento al aporte a ver en que cambia el asunto.

¿En serio?

Mira, el código que pusiste en el playground:

Código CSS:

width:200px;
height:200px;
 

¿Eso no es cuadrado?

¿No crees que es mejor recortar la imagen a hacer una ventana por la cual solo ver una parte de ella? Si es basante simple de entender la optimización.

[xfxstudios]

si entendi, pero cada quien tiene su método y no soy de los que utiliza palabras xx en contra del código de otro programador, precisamente por eso, porque cada programador se crea una manera de trabajar, quizá mala a ojos de otros y quizá buena para el resto, pero es su manera, su sello y cada quien va a prendiendo en el camino cuales son las mejores practicas en la programación, pero lo que si es seguro es que cada cosa tiene su método de hacerse una finalidad para ello.

Yo utilizo ambos métodos para fines distintos, recorto la imagen cuando es para perfiles y esas cosas por obvias razones, para que sea más pequeña, pero hay otras imágenes que no debo cortar en mi aplicación porque mis clientes las necesitan tal y como las suben para poder visualizar el panorama completo de una falla dentro de la empresa, y por otro lado no las puedo mostrar en tamaño original dentro de la app, en ese caso opto por un thumbnail miniatura de la misma (sin recortar) y enlazo a la original con un lightbox y listo, parecerá mas codigo y mas trabajo, pero la aplicación y el fin de esta lo exige. Ademas sabes que recortar la imagen también exige unas cuantas lineas de código adicionales y hasta en casos de librerías para mejorar la UX, son solo temas y cuestiones de cada quien, en el camino se irá optimizando e irá evolucionando, solo imagina si utilizaras aun las versiones originales de las aplicaciones que tienes para programar??, no te servirian de mucho actualmente, todo evoluciona hasta el conocimiento, por ello respeto a todo programador, sea pequeño, grande, experimentado o no, porque mañana no sabemos a quien le damos la mano o si el conferencista resulta ser aquel chapucero de código el cual evolucionó jajajaja. Saludos, exitos y mi respeto a todos.

[lexus]

Hola, realmente agradezco el interés

no quise profundizar mucho en pra que lo necesitaba
solo necesitaba ponerlo en un circulo con css y asi me sirvio tal cual como me lo ayudaron asi era,


no pregunte por redimensionar imagenes por que esto ya se hace del lado del servidor y no cabe en este tema,
y realmente no lo necesito redimensionar,

esto lo necesitaba porque estoy haciendo una aplicacion para celulares con phonegap
que es con html5 y css3, y es un listado de contactos del celular
por tal razón las imágenes cargan directamente desde el celular y no necesitan redimensionarse ni tampoco cargara mas lento o rápido porque no requiere de lenguaje de servidor

les agradezco el interes pero el tema ya me lo solucionaron con la primer respuesta

muchas gracias.