Как исправить проблемы с рендерингом картинок?

Question

[109k4]

Картинки размываются, а когда высота больше ширины то растягиваются. Это происходит на Chrome, Opera, Edge, на Firefox же, все идеально.

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

[Евгений]

Попробуйте так

.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%;
    }
}

Comments

[109k4]

Не работает:

[Евгений]

109k4, Если вам надо картинку на всю ширину, то добавляйте её через. background-image и background-size: cover;

[109k4]

Мне хотелось бы сделать это через img и object-fit