@109k4

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

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

Chrome, Opera, Edge

60101a29ecd85608820684.png

Firefox

60101a3e2da98467456422.png

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;
		}
}
  • Вопрос задан
  • 46 просмотров
Решения вопроса 1
iamd503
@iamd503 Куратор тега CSS
Верстальщик
Попробуйте так
.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%;
    }
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы