CSS --使用肖像图像在圆圈内显示，而不失真

Question

我有以下几点：

<div class="profile-picture">
  <img src="http://thumb9.shutterstock.com/display_pic_with_logo/239779/154705646/stock-photo-portrait-of-real-man-face-looking-at-camera-on-blue-background-154705646.jpg" alt="Profile - James Hales">
</div>

CSS

.profile-picture img {
    border-radius: 50%;
    margin-top: 0;
    margin-bottom: 20px;
    height: 392px;
    width: 250px;
}

我希望配置文件图片是一个完美的圆圈与图像放置在里面。有没有一种方法基本上是裁剪图像与CSS，以便它将'x‘的像素数量从底部，以便图像显示在一个圆圈内，而不扭曲图像？

JSFIDDLE

Answer 1

这里有两种方法来实现你想要的。第二张图片以图像为中心，而不是在顶部垂直对齐。

​

.profile-picture {
    position:relative;
    overflow:hidden;
    border-radius: 50%;
    height: 200px;
    width: 200px;
}

.profile-picture img {
    position:absolute;
    height: auto;
    width: auto;    
    max-width:100%;
}

.centered img {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}

<div class="profile-picture">
  <img src="http://thumb9.shutterstock.com/display_pic_with_logo/239779/154705646/stock-photo-portrait-of-real-man-face-looking-at-camera-on-blue-background-154705646.jpg" alt="Profile - James Hales">
</div>
<div class="profile-picture centered">
  <img src="http://thumb9.shutterstock.com/display_pic_with_logo/239779/154705646/stock-photo-portrait-of-real-man-face-looking-at-camera-on-blue-background-154705646.jpg" alt="Profile - James Hales">
  </div>

​

Answer 2

您可以使用object-fit，但是support不是很好

​

.profile-picture {
  border-radius: 50%;
  margin-top: 0;
  border: 1px solid black;
  margin-bottom: 20px;
  height: 250px;
  width: 250px;
  overflow: hidden;
}
img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

<div class="profile-picture">
  <img src="http://thumb9.shutterstock.com/display_pic_with_logo/239779/154705646/stock-photo-portrait-of-real-man-face-looking-at-camera-on-blue-background-154705646.jpg" alt="Profile - James Hales">
</div>

​

或者您可以将img设置为背景

​

.profile-picture {
  border-radius: 50%;
  margin-top: 0;
  border: 1px solid black;
  margin-bottom: 20px;
  height: 250px;
  width: 250px;
  overflow: hidden;
  background: url("http://thumb9.shutterstock.com/display_pic_with_logo/239779/154705646/stock-photo-portrait-of-real-man-face-looking-at-camera-on-blue-background-154705646.jpg");
  background-size: cover;
  background-position: center;
}

<div class="profile-picture"></div>

​

Answer 3

Flexbox可以做到这一点。当然，容器必须是正方形的。

​

.profile-picture {
  border-radius: 50%;
  margin-top: 0;
  border: 1px solid black;
  margin-bottom: 20px;
  height: 250px;
  width: 250px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
img {
  display: block;
}

<div class="profile-picture">
  <img src="http://thumb9.shutterstock.com/display_pic_with_logo/239779/154705646/stock-photo-portrait-of-real-man-face-looking-at-camera-on-blue-background-154705646.jpg" alt="Profile - James Hales">
</div>

​