0

Hola a todos necesito ayuda ya que estoy haciendo una pagina web con laravel en la que eliges tu foto de perfil, el problema es que la foto de perfil la demuestra de forma ovalada, he intentado de algunas formas que se demuestre de forma completamente redonda pero no lo he conseguido, esto es algo como lo que he intentado por si el problema era el tamaño de la imagen usando esta libreria, este es el código php:

  $img = Image::make(File::get($image_path));

  $img->resize(100, 100);
  $img->save(Storage::disk('users')->put($image_path_full, File::get($image_path)));

La variable $image_path es la imagen que me llega por el formulario y $image_path_full es una variable con la que hago que el nombre de la imagen sea único, este es el codigo css que he intentado (no soy bueno en css por lo que no se si los estilos esten del todo bien):

.navbar .container-avatar
{
    margin-top: 5px;
    overflow: hidden;
    width: 50px;
    height: 50px;
}

.navbar .container-avatar .avatar
{
    width: 100%;
    border-radius: 50%;
}

La clase navbar es la barra de navegación y container-avatar es la caja de la imagen y finalmente la clase avatar es la imagen.

Y este es el resultado que me da incluyendo la imagen que muestro en el formulario:

introducir la descripción de la imagen aquí

Por ultimo este es el código completo de mi formulario de la imagen:

<input autocomplete="off" id="email" type="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ Auth::user()->email }}" required>

Agradezco su ayuda :).

7
  • 2
    La imagen se muestra ovalada por tu css... le estás dando un ancho de 50px y un alto de 30px. Para que se muestre redonda, dale a ambos el mismo valor, o ambos 30px o ambos 50px.
    – Jaime
    Commented el 8 oct. 2021 a las 3:52
  • Ya lo intente dándole a ambos el mismo como dices y sigue igual, ya actualice la pregunta de como lo deje
    – DFG
    Commented el 8 oct. 2021 a las 13:42
  • @Davidflogar pon también el código del form por favor. Commented el 8 oct. 2021 a las 14:30
  • <img src="..." alt="..." class="rounded-circle"> si estas usando bootstraps esta clase te puede ayudar Commented el 8 oct. 2021 a las 14:36
  • @HeynerMartinez intente con esa clase pero la imagen termina usando mas especio del que le indique
    – DFG
    Commented el 8 oct. 2021 a las 14:51

1 respuesta 1

0

Como te han dicho varios, creo que el problema está en el CSS, puedes solventarlo fácilmente haciendo una clase en CSS, por ejemplo, img-avatar, ahi añades border-radius: 50%; y usar esa clase para hacer la imagen redonda, algo así:

.img-avatar {
  border-radius: 50%;
  width: 200px;
  height: 200px;
}
<h3>Imagen con la clase</h3>
<img class = "img-avatar" src="https://www.w3schools.com/howto/img_avatar.png">
<h3>Imagen sin la clase</h3>
<img src="https://www.w3schools.com/howto/img_avatar.png" width="200" height="200">

3
  • Gracias, de la manera en la que mencionas ya logro quedar de forma redonda, un ultimó problema es que la imagen pierde un poco de calidad, ¿hay alguna forma de evitar eso o no? si no de todos modos gracias :)
    – DFG
    Commented el 8 oct. 2021 a las 17:09
  • @Davidflogar mencionaste que usas una librería para redimensionar la imagen, ¿has intentado no usar la librería y cambiar el tamaño con CSS? Commented el 8 oct. 2021 a las 21:06
  • Ya lo intente sin usar la librería y es el mismo resultado
    – DFG
    Commented el 8 oct. 2021 a las 23:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.