How to fix image rendering issues?

Question

css

Images are blurry, and when the height is greater than the width, they are stretched. It happens on Chrome, Opera, Edge, on Firefox, everything is perfect.

Chrome, Opera, Edge



Firefox



html

<div class="userIcon">
  <img src="someUrl" alt="">
</div>

scss

.userIcon {
    width: 50px;
    height: 50px;

    border-radius: 50%;
    background-color: darken($base-color, 30%);

    overflow: hidden;


    img{
      width: 100%;
      height: 100%;

      object-fit: cover;
    }
}

Answer 1

Try like this

.userIcon {
    width: 50px;
    height: 50px;

    border-radius: 50%;
    background-color: darken($base-color, 30%);

    overflow: hidden;

    display:flex;

    img{
      margin: auto;
      max-width: 100%;
      max-height: 100%;
    }
}