Question

我正在尝试在我的SSO系统中实现个人资料图片。用户可以上传任何尺寸的图像文件（但最大不能超过500KB）。

我想使用.img-thumbnail和.rounded-circle在半径为200 px的圆形缩略图中显示图像，类似于在Bootstrap documentation上显示的图像。对于正好为200 x 200像素（所需大小）正方形的图像，此方法很好用，但是如果不是正方形，则圆圈变为椭圆形或仅显示图像左上角的一小部分。

我目前尝试了各种解决方案：

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

这会导致一些奇怪的形状：

This results in some odd shapes

Answer 1

根据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>

具有不同图像大小的Bootstrap 4.1图像缩略图

1 个答案: