css - sistema - ¿Cómo mostrar la imagen del perfil de usuario en círculo?
red social google+ crear cuenta (4)
background-size
MDN - Trucos CSS - ¿Puedo usar
Como los tamaños de las imágenes son variables, debe asegurarse de que cover la división y que estén center en ella.
Añadiendo el border-radius: 50%; Te dará el efecto círculo.
.user {
display: inline-block;
width: 150px;
height: 150px;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.one {
background-image: url(''http://placehold.it/400x200'');
}
.two {
background-image: url(''http://placehold.it/200x200'');
}
.three {
background-image: url(''http://placehold.it/200x400'');
}
<div class="user one">
</div>
<div class="user two">
</div>
<div class="user three">
</div>
En la práctica, no querría tener una clase para cada imagen, por lo que debería especificarla con un estilo en línea en el marcado:
<div class="user" style="background-image:url(''path/to/user/img.png'')"></div>
object-fit
MDN - Trucos CSS - ¿Puedo usar
Una alternativa más nueva es usar la propiedad de object-fit en una etiqueta <img> regular. Esto no funciona en IE o versiones anteriores de Edge.
.user {
display: inline-block;
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
}
<img src="http://placehold.it/400x200" class="user">
<img src="http://placehold.it/200x200" class="user">
<img src="http://placehold.it/200x400" class="user">
Estoy desarrollando un sitio donde la imagen de perfil de los usuarios debe mostrarse en un círculo. Hay muchos círculos en este sitio y el tamaño del círculo puede variar.
Puedo mostrar imágenes cuadradas correctamente pero con imágenes verticales y horizontales me enfrento a un problema.
Tengo que mostrar la imagen en un círculo con los siguientes criterios:
- Supongamos que el tamaño de la imagen es
500x300. La imagen debe recortar 100 px de los lados derecho e izquierdo, de modo que se muestre el centro de la imagen. Ahora la imagen debe ser300x300, centrada. Entonces necesito hacer un círculo a partir de esa imagen. O oculta 100px de la derecha y la izquierda de la imagen usando CSS. - Si el tamaño de la imagen es
300x500, entonces el área superior e inferior se debe ocultar usando CSS
¿Qué tengo que hacer para solucionar esto? Las respuestas solo de CSS son las mejores para mí, si es posible.
Si está utilizando bootstrap, tiene la clase img-circle para hacer esto.
establece la imagen como fondo, centrada.
<div class="image"></div>
css:
.image{
width: 300px;
height: 300px;
border-radius: 50%; /*don''t forget prefixes*/
background-image: url("path/to/image");
background-position: center center;
/* as mentioned by Vad: */
background-size: cover;
}
<html>
<head>
<style>
#circle
{
border-radius:50% 50% 50% 50%;
width:300px;
height:300px;
}
</style>
</head>
<body>
<img src="skin-tone.jpg"
id="circle">
</body>
</html>