【问题标题】：How can I make the profile image in circular shape [duplicate]如何将个人资料图像制作成圆形[重复]
【发布时间】：2018-11-24 02:01:58
【问题描述】：

当我上传不同的像素时，它不显示确切的圆形。它变成椭圆形。但是当我上传方形图片时，它的确切圆形

<div class="profile_pic">

                           <?php 
                             $model = SimUser::find()->where(['user_id' => Yii::$app->user->identity->user_id])->one();
                           if ($model->user_profile_image != null) { ?>
                                        <img src="<?= Files::getFilePath($model->user_profile_image, true); ?>"  class ="img-circle profile_img  img-responsie " />
                                    <?php } else { ?>
                                       <?= Html::img(\Yii::$app->request->BaseUrl . '/web/images/user.png', ['class' => 'img-circle profile_img', 'alt' => '...']); ?>
                                     <?php } ?>
                    </div>

如果图像的像素也不同，我如何将图像制作成圆形

【问题讨论】：

我知道实现这一点的唯一可靠方法是不使用图像标签，而是使用 div，在该 div 上设置宽度、高度和边框半径以使其成为圆形，然后添加图像作为居中的背景图像。这样你就可以保持圆形。
.profile_pic { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; }

标签： html css

【解决方案1】：

如果您的图片没有 1:1 的比例（例如：300 像素 x 300 像素），那么 border-radius 确实会给您一个椭圆形的形状。您可以通过为图像提供相同的高度和宽度来规避这种情况，如下所示：

方法一

img {
  height: 250px;
  width: 250px;
  border-radius: 50%;
}

&lt;img src="//unsplash.it/350/200" alt="unplash"&gt;

方法二

您还可以将图像包装在div 中，并为 div 本身提供相同的固定高度和宽度，并使用overflow: hidden; 使图像符合父 div 的形状（圆形）：

div {
  height: 250px;
  width: 250px;
  border-radius: 50%;
  overflow: hidden;
}

img {
  width: 100%;
}

<div>
  <img src="//unsplash.it/600/600" alt="unplash">
</div>

【讨论】：

【解决方案2】：

将此添加到您的 CSS：

.img-circle{
   height: 100px;
   max-width: 100px;
   border-radius: 50%;
   object-fit: cover;
}

【讨论】：

我试过那个。不适合我...它仍然是椭圆形的

【解决方案3】：

从我的评论开始：我知道实现这一点的唯一可靠方法是不使用图像标签，而是使用 div，在该 div 上设置宽度、高度和边框半径以使其成为圆形，然后将图像添加为居中的背景图像。这样你就可以保持圆形。

这是一个实际的工作示例：

.profile-img {
width: 300px;
height: 300px;
border-radius: 50%;
background-position: center center;
background-size: cover;
}

&lt;div class="profile-img" style="background-image: url('//via.placeholder.com/350x250');"&gt;&lt;/div&gt;

对于某些尺寸，某些图像将不可见，但我不知道避免这种情况的可靠方法。

【讨论】：