方法1

Question

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

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

如果图像不同，也可以将图像制作成圆形

Answer 1

将此添加到您的css：

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

Answer 2

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

方法1

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

<img src="//unsplash.it/350/200" alt="unplash">

方法2

您还可以将图像包裹在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>

Answer 3

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

以下是实践中的一个实例：

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

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

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

如何将轮廓图像制作成圆形

3 个答案:

方法1

方法2