-2

When I upload the different pixels .its not displaying the exact circular shape.it become oval shape.but when i upload square shaped picture its exact circular shape 

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

how can i make the image to circular shape if it different pixels also

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
jane
  • 71
  • 1
  • 7
  • 1
    – DsRaj Jun 14 '18 at 10:14
  • 1
    The only reliable way I know of achieving this is to not use an image tag but instead use a div, setting the width, height and border radius on that div to make it a circle, and then adding the image as a background image centered within it. That way you maintain the circle shape. –  Jun 14 '18 at 10:17
  • `.profile_pic { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; }` – CD001 Jun 14 '18 at 10:19

3 Answers3

3

add this to your css:

.img-circle{
   height: 100px;
   max-width: 100px;
   border-radius: 50%;
   object-fit: cover;
}
Kalu
  • 561
  • 2
  • 7
3

If your image does not have a 1:1 ratio (for example: 300px by 300px) then a border-radius will indeed give you an oval shape. You can circumvent this by giving the image the same height and width, like so:

Method 1

img {
  height: 250px;
  width: 250px;
  border-radius: 50%;
}
<img src="//unsplash.it/350/200" alt="unplash">

Method 2

You can also wrap your image in a div and give the div itself a fixed height and width that are the same and use overflow: hidden; to make the image conform to the shape (circle) of the parent div:

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

img {
  width: 100%;
}
<div>
  <img src="//unsplash.it/600/600" alt="unplash">
</div>
VXp
  • 11,598
  • 6
  • 31
  • 46
Jos van Weesel
  • 2,128
  • 2
  • 12
  • 27
2

Following on from my comment: The only reliable way I know of achieving this is to not use an image tag but instead use a div, setting the width, height and border radius on that div to make it a circle, and then adding the image as a background image centered within it. That way you maintain the circle shape.

Here's a working example of that in practice:

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

With some dimensions some of the image will not be visible but I don't know a reliable way to avoid that.