2

tengo un problema al crear un div y dentro de este tengo una imagen.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="circle">
        <img src="https://picsum.photos/id/237/200/300 " alt="">
    </div>
</body>
</html>

tengo mi css asi:

.circle{
    width: 200px;
    height: 200px;
    border-radius: 100%;
}

.circle img{
    width: 100%;
    height: 100%;
    border-radius: 100%;
}

les presento un ejemplo de como debería verse mi imagen completa en el circulo img1, y como la tengo img2. Nose como editarla para que sea vea completa.

como quiero que se vea es así, completa

mi imagen esta así, y no se la ve completa dentro del circulo

les agradezco de antemano a quien pueda ayudarme.

2 respuestas 2

4

La razón por la cual el ejemplo no se muestra como esperas es porque la imagen que estas utilizando no esta completa. Si abres el enlace del src en tu img (https://picsum.photos/id/237/200/300), te darás cuenta de que la imagen no esta completa.

El otro detalle que tienes es que en el CSS la clase que modifica img (.circle img) toma un width y height del 100% lo que causará que la imagen se deforme. Lo ideal es que el contenedor (.circle) le de la forma a la imagen, por lo tanto, a este contenedor le ponemos el widht, height, border-radius y overflow hidden para que la imagen se recorte a la forma de tu div (.circle).

Aqui te dejo un ejemplo con la imagen completa y el css que se parece mas a lo que buscas:

.circle{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle img{
    height: 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="circle">
        <img src="https://elcomercio.pe/resizer/vEQ46iceerV8ZNX-D66eYXdJ5w0=/640x0/smart/filters:format(jpeg):quality(75)/arc-anglerfish-arc2-prod-elcomercio.s3.amazonaws.com/public/BHLHKWQSRRGCTFTWSDN5LAR2WA.jpg" alt="">
    </div>
</body>
</html>

1
  • Bienvenido a StackOverflow. Cuándo uses snippets, no hace falta encerrarlos en ticks (`). He editado tu respuesta para que el snippet quede bien y pueda ejecutarse. Un saludo.
    – jachguate
    Commented el 28 jun. 2023 a las 6:03
0

En el ejemplo, lo que hace es mostrar toda la imagen en el ancho posible del círculo, pero en la imagen que tienes al parecer no está completa o tiene un recorte (es por eso que lo vez algo estirada).

Para visualizar la imagen por completa en el círculo podrías usar object-fit: contain:

.circle {
  display: flex;
}

.circle img {
  width: 200px;
  height: 200px;
  border-radius: 100%;
  object-fit: contain;
}
<div class="circle">
  <img src="https://picsum.photos/id/237/200/300" alt="">
</div>

Y si quieres adaptar todo el ancho posible del círculo en tu imagen, tendrías que usar object-fit: cover:

.circle {
  display: flex;
}

.circle img {
  width: 200px;
  height: 200px;
  border-radius: 100%;
  object-fit: cover;
}
<div class="circle">
  <img src="https://picsum.photos/id/237/200/300" alt="">
</div>

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.