图像在底部被切断使用CSS

Question

我试图用这个CSS代码，查看在圈中用户的个人资料照片转了一圈观察：

.circle { 
 
    margin: auto; 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
    -webkit-border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
    overflow:hidden; 
 
    } 
 
    .circle img{ 
 
     width:100%; 
 
    }

<div class='circle'> 
 
    <img src='https://static.pexels.com/photos/2438/nature-forest-waves-trees.jpg'> 
 
     </div>

问题是，在图像被剪切底部：

但我希望在一个完整的CIR来显示图像CLE。为什么会发生这种情况，我该如何解决？

Answer 1

按我的意见，你需要的，如果你想显示整个图像用正方形图片，否则，你需要做的图像100％的最短边 - 中这种情况下，图像是风景，所以你需要作出高度100％，使多余的宽度将被隐藏：

.circle { 
 
    margin: auto; 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
    -webkit-border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
    overflow: hidden; 
 
} 
 

 
.circle img { 
 
    height: 100%; 
 
}

<div class='circle'> 
 
    <img src='https://static.pexels.com/photos/2438/nature-forest-waves-trees.jpg'> 
 
</div>

Answer 2

默认情况下，img标记从图像文件的大小取其大小。在这种情况下，图片大于200x200，因此图片延伸至您的div的大小以下。通过将height: 100%添加到img标签，问题也解决了。

.circle { 
 
    margin: auto; 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
    -webkit-border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
    overflow: hidden; 
 
} 
 

 
.circle img { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class='circle'> 
 
    <img src='https://static.pexels.com/photos/2438/nature-forest-waves-trees.jpg'> 
 
</div>

注意上面的答案拉伸图像是200×200。如果你不希望这样伸展，我会用background-image代替：

.circle { 
 
    margin: auto; 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
    -webkit-border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
    overflow: hidden; 
 

 
    background-image: url('https://static.pexels.com/photos/2438/nature-forest-waves-trees.jpg'); 
 
background-size: cover; 
 
background-repeat: no-repeat; 
 
background-position: center; 
 
}

<div class='circle'> 
 
</div>

Answer 3

如果你不感兴趣的IE那么object-fit: cover是确保一个伟大的方式，图像总会覆盖可用空间的同时保持其比例。

.avatar { 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 100%; 
 
    overflow: hidden; 
 
} 
 

 
.avatar img { 
 
    width: 100%; 
 
    height: 100%; 
 
    object-fit: cover; 
 
}

<div class="avatar"> 
 
    <img src="https://static.pexels.com/photos/2438/nature-forest-waves-trees.jpg" /> 
 
</div> 
 

 
<div class="avatar"> 
 
    <img src="https://images.unsplash.com/photo-1504125130065-19cd3d71c27a?dpr=1&auto=format&fit=crop&w=2134&q=60&cs=tinysrgb" /> 
 
</div>