Estoy tratando de ver la foto de perfil de un usuario en un círculo usando este código CSS:

.circle {
    margin: auto;
    width: 200px;
    height: 200px;
    border-radius: 50%;
     -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
    overflow:hidden;
    }
    .circle img{
        width:100%;
    }
<div class='circle'>
    <img src='https://static.pexels.com/photos/2438/nature-forest-waves-trees.jpg'>
        </div>

El problema es que la imagen se está cortando en la parte inferior:

enter image description here

Sin embargo, esperaba que la imagen se mostrara en un círculo completo. ¿Por qué sucede esto y cómo puedo solucionarlo?

css
3
Dev.aaron 18 oct. 2017 a las 18:27

3 respuestas

La mejor respuesta

Según mi comentario, debe usar una imagen cuadrada si desea que se muestre toda la imagen; de lo contrario, debe hacer que el lado más corto de la imagen sea 100%; en este caso, la imagen es horizontal, por lo que necesita hacer la altura 100%, por lo que se ocultará el ancho adicional:

.circle {
  margin: auto;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  overflow: hidden;
}

.circle img {
  height: 100%;
}
<div class='circle'>
  <img src='https://static.pexels.com/photos/2438/nature-forest-waves-trees.jpg'>
</div>
0
Pete 18 oct. 2017 a las 15:42

Si no está interesado en IE, entonces object-fit: cover es una excelente manera de asegurarse de que la imagen siempre cubra el espacio disponible y, al mismo tiempo, mantenga sus proporciones.

.avatar {
  display: inline-block;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<div class="avatar">
  <img src="https://static.pexels.com/photos/2438/nature-forest-waves-trees.jpg" />
</div>

<div class="avatar">
  <img src="https://images.unsplash.com/photo-1504125130065-19cd3d71c27a?dpr=1&auto=format&fit=crop&w=2134&q=60&cs=tinysrgb" />
</div>
0
Valentin 18 oct. 2017 a las 15:42

Por defecto, las etiquetas img toman su tamaño del tamaño del archivo de imagen. En este caso, la imagen era más grande que 200x200, por lo que la imagen se extendía por debajo del tamaño de su div. Al agregar height: 100% a la etiqueta img también, el problema se resuelve.

.circle {
  margin: auto;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  overflow: hidden;
}

.circle img {
  width: 100%;
  height: 100%;
}
<div class='circle'>
  <img src='https://static.pexels.com/photos/2438/nature-forest-waves-trees.jpg'>
</div>

Tenga en cuenta que la respuesta anterior estira la imagen para que sea 200x200. Si no desea este estiramiento, usaría background-image en su lugar:

.circle {
  margin: auto;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  overflow: hidden;

  background-image: url('https://static.pexels.com/photos/2438/nature-forest-waves-trees.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
<div class='circle'>
</div>
-3
Derek Brown 18 oct. 2017 a las 15:44