从一个矩形图像创建一个圆形头像保持比例，并使用图像的中心

Question

我有图像是480px宽640px高。

我想使用CSS在150px宽的网页上将它们显示为圆形。但我想看到图像的中心。

因此，采取80px的原始图像的顶部和底部产生广场与我想看到的图像。然后我想把它变成一个圆圈。

我尝试的所有事情都会延伸图像，因为大多数示例都是使用方形图像开始的。

任何一个可以帮助

Answer 1

您可以设置图像作为元素的背景，设置它的背景大小cover，然后使用边界半径轮的边缘。

#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>

Answer 2

如果图像需要是在HTML，而不是一个背景图像

.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://lorempixel.com/image_output/nightlife-q-c-640-480-3.jpg" alt="" /> 
 
</div>

Answer 3

另一种解决方案是对于img元素简单CSS类：

.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); 
} 

用法：

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

Answer 4

另一个解决方案是设置尺寸IMG并使用 “对象配合：盖;”。 它将和“背景大小：封面”一样做，而不会混淆背景图片。

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

我发现它克里斯Nager岗位。 - 1

编辑： 作为@prograhammer提到，这不适用于IE。 Edge仅支持<img>标签。

在边缘

部分支持是指object-fit只支持<img> - 2

编辑2： This普里莫兹Cigler的岗位展示了如何使用Modernizr增加对IE一个后备支持，但是，在这种情况下， ，你将需要添加一个包装到图像。

Answer 5

#avatar { 
 
    /* This image is 687 wide by 1024 tall, similar to your aspect ratio */ 
 
    background-image: url('http://imgur.com/a/eoiBH'); 
 
    
 
    /* 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: center; 
 

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

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