redondear - css imagen esquinas redondeadas

Esquinas redondeadas en una imagen rectangular usando solo CSS

Question

Me gustaría crear una imagen redonda a partir de una imagen rectangular usando radio-borde.

¿Existe una forma sencilla de lograr esto con CSS sin distorsionar la imagen Y asegurando que un círculo sea perfectamente redondo?

Ver intentos fallidos aquí:

http://jsfiddle.net/v8g3y0na/

.rounded-corners-2{
border-radius: 100px;
height: 150px;
width: 150px;

¿Se puede hacer esto solo en CSS ...?

Answer 1

¿Existe una forma sencilla de lograr esto con CSS sin distorsionar la imagen Y asegurando que un círculo sea perfectamente redondo?

Sí, y también puede evitar el uso de elementos primarios simplemente configurando la imagen como fondo. También puede colocar la imagen como desee utilizando el atributo de background-position .

Actualizado para abordar las preocupaciones sobre el tamaño, la redondez, la inclinación y el contenido cargado dinámicamente.

setTimeout(function() {
$("#image").css("background-image", "url(https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97350&w=150&h=350)");
}, 3000);

#image {
display: block;
background-image: url("https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150");
border-radius: 200px;
width: 200px;
height: 200px;
background-size: cover;
background-position: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image" />

Answer 2

object-fit

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

<img src="http://placehold.it/800x400/0bf">

img con imagen de fondo

Para navegadores más antiguos, use la etiqueta <img>

<img alt="My image"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
style="background: url(http://placehold.it/300x180/0bf) 50% / cover;
border-radius: 50%;
width:150px;">

El truco consiste en establecer una px transparente para la src (para evitar el icono de imagen rota ) y hacer el mejor CSS3 que el tamaño de fondo tiene para ofrecer ( cover ).

Answer 3

Para ello, agregue un div principal a su img y el código fluye de la siguiente manera:

figure{
width:150px;
height:150px;
border-radius:50%;
overflow:hidden;
}

Demo actualizada

Answer 4

Pon un marco DIV alrededor de la imagen: DEMO

<div class="rounded-corners">
<img src="http://welovekaleycuoco.com/wp-content/uploads/2013/11/Kaley-Cuoco-Wallpapers-81.jpg" width="200">
</div>
div.rounded-corners {
height: 150px;
width: 150px;
border-radius: 50%;
overflow: hidden;
}

nota: ya no necesitas tu estilo img.rounded-corners

Answer 5

http://jsfiddle.net/o8fwpug5/37/

Esta es una ligera actualización de una respuesta anterior . Me gustó la otra respuesta, pero esto es un poco más simplificado y le da un ancho basado en píxeles para la envoltura. De esta manera, es más fácil ver y cambiar las dimensiones para sus propios fines.

HTML:

<div><img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" /></div>

CSS:

div{
height:200px;
width:200px;
position:relative;
border-radius:100%;
overflow:hidden;
}
img{
position:absolute;
left:-50%; right:-50%; top:0;
margin:auto;
height:100%; width:auto;
}