Tengo terminada una aplicación web para final de curso. En la misma, al registrarse un usuario puede subir su foto de perfil si lo desea. Al iniciar sesión, introduzco la ruta de su imagen en una variable de sesión:
echo " <div class='usuario'> <div class='avatar' style='background-image: url(".$_SESSION['avatar'].")'></div> </div>";
Si la imagen se sube desde un ordenador, todo bien. El estilo CSS es el siguientes:
div.avatar { background-repeat: no-repeat; border-radius: 50%; background-size: 100% auto; height: 65px; margin: 10px auto; width: 65px; }
De esta forma, sea cuál sea su tamaño o forma, se muestre redonda sin estirarse o aparecer ovalada.
El caso es que, si se registra un nuevo usuario desde un dispositivo móvil y selecciona una nueva imagen, que, por lo que he probado está en vertical, al cargarla hace el extraño: imaginaros la imagen redonda, y ésta se corta justo por la mitad horizontalmente y solo se visualiza la parte superior.
La imagen se recoge con un <input type="file"> y comprobando que sea un formato de imagen y no cualquier otro archivo.
¿A alguien le ha pasado algo parecido o sabe cuál puede ser el problema? O si hay otra posibilidad de subir imágenes que funcione tanto en móviles como en ordenadores.
Gracias.
Respuestas
Como dices que la imagen aparece cortada verticalmente por la mitad, yo sospecharía de la propiedad background-size. Puede ser que el sistema operativo del móvil concreto que estás probando no funcione bien. Según la web de referencia Can I use?, algunas versiones de Android antiguas tienen algunos problemas menores con esta opción: caniuse.com/#search=background-size.
Por si te sirve, en esta página de Microsoft puedes comprobar cómo se ve tu página en diferentes dispositivos móviles y se incluyen algunos Android y iOS. Quizás te sirva para comprobar si el fallo es común a todos los móviles.
@javiereguiluz