我正在尝试在我的SSO系统中实现个人资料图片。用户可以上传任何尺寸的图像文件（但最大不能超过500KB）。
我想使用.img-thumbnail和.rounded-circle以半径200 px的圆形缩略图显示图像，类似于Bootstrap documentation上显示的图像。对于正好为200 x 200 px（所需大小）正方形的图像，此方法效果很好，但如果不是正方形，则圆圈变为椭圆形或仅显示图像左上角的一小部分。
我已经尝试了各种解决方案，目前：
.profile-pic {
width: 200px;
height: 200px;
overflow: hidden;
}<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-lg-3">
<div class="profile-pic">
<img class="rounded-circle img-thumbnail" src="https://i.imgur.com/BK7wL0d.jpg" alt="">
</div>
</div>
. . .
</div>
</body>
</html>这导致一些奇怪的形状：
最佳答案
根据img-thumbnail引导程序的样式定义，height为auto。
必须使用height:200px将img-thumbnail声明为!important以防止覆盖。
参见小提琴：https://jsfiddle.net/mwzg13fj/3/
.profile-pic {
width: 200px;
height: 200px;
overflow: hidden;
}
.img-thumbnail{
height:200px!important;
}<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<div class="row">
<div class="col-lg-3">
<div class="profile-pic">
<img class="rounded-circle img-thumbnail" src="https://i.imgur.com/BK7wL0d.jpg" alt="">
</div>
</div>
</div>关于html - 具有不同图像大小的Bootstrap 4.1图像缩略图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51347575/