html - titulo - Cree un avatar de círculo a partir de una imagen rectangular manteniendo las proporciones y simplemente utilizando el centro de la imagen

poner logo en titulo html

Question

Tengo imágenes que son 480px de ancho por 640px de alto.

Quiero mostrarlos como círculos en una página web de 150px de ancho usando CSS. Pero quiero ver el centro de la imagen.

Por lo tanto, tomar 80 px de la parte superior e inferior de la imagen original produce el cuadrado con la imagen que quiero ver. Entonces quiero hacer eso en un círculo.

Todo lo que intento amplía la imagen, ya que la mayoría de los ejemplos son usar una imagen cuadrada para comenzar.

Alguien puede ayudar

Answer 1

Otra solución es establecer los tamaños para img y usar "object-fit: cover;". Hará lo mismo que el "tamaño de fondo: cubierta" sin desordenar con imágenes de fondo.

img {
  object-fit: cover;
  border-radius:50%;
  width: 150px;
  height: 150px;
}

<img src="http://i.stack.imgur.com/Dj7eP.jpg" />

Lo encontré en el post de Chris Nager. - 1

Edición: Como mencionó @prograhammer, esto no funciona en IE. Edge solo lo admite en etiquetas <img> .

El soporte parcial en Edge se refiere al object-fit solo compatible con <img> - 2

Edición 2: This publicación de Primož Cigler muestra cómo usar Modernizr para agregar un soporte alternativo para IE pero, en este caso, deberá agregar un contenedor a la imagen.

Answer 2

Otra solución es la clase css simple para el elemento img:

.avatar {

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    -webkit-box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2);
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2);
}

Uso:

<img class="avatar" src="http://path.to/image.jpg" />

Answer 3

Si se requiere que la imagen esté en el HTML en lugar de una imagen de fondo

.wrapper {
  width:150px;
  height:150px;
  margin: 25px auto;
  overflow: hidden;
  border-radius:50%;
  position: relative;
}

.wrapper img {
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%)
}

<div class="wrapper">
  <img src="http://i.stack.imgur.com/Dj7eP.jpg" alt="" />
</div>

Answer 4

Puede establecer la imagen como el fondo de un elemento, establecer su tamaño de fondo para cover , y luego usar el radio del borde para redondear los bordes.

#avatar {
    /* This image is 687 wide by 1024 tall, similar to your aspect ratio */
    background-image: url(''http://i.stack.imgur.com/Dj7eP.jpg'');
    
    /* make a square container */
    width: 150px;
    height: 150px;

    /* fill the container, preserving aspect ratio, and cropping to fit */
    background-size: cover;

    /* center the image vertically and horizontally */
    background-position: top center;

    /* round the edges to a circle with border radius 1/2 container size */
    border-radius: 50%;
}

<div id="avatar"></div>