Фотография профиля круга CSS – плохое качество
У меня проблема с фотографией профиля пользователя. Фото следующее: изображение
На таких сайтах, как YouTube, качество фото лучше, чем на моем сайте: пример на ютубе
На моем сайте изображение очень низкого качества: пример на моем сайте
HTML:
<div class = "profile-photo">
<img src = "profile-photo/1.jpg">
</div>
CSS:
.profile-photo {
width: 2.8rem;
height: 2.8rem;
border-radius: 50%;
overflow: hidden;
}
Может ли кто-нибудь помочь мне решить эту проблему с качеством фотографий? Спасибо.
Ответы 2
- Попробуйте на самом деле уменьшить размер вашего изображения, чтобы он соответствовал размеру оболочки.
- Попробуйте добавить
image-rendering: crisp-edges;[1] к своему изображению. - Иногда
transform: translateZ(0);тоже помогает. - Проверьте фактическое изображение на Youtube, чтобы увидеть любые другие свойства, примененные для лучшего качества.
.profile-photo {
width: 2.8rem;
height: 2.8rem;
border-radius: 50%;
overflow: hidden;
}
.profile-photo img {
width: 100%;
height: 100%;
display: block;
image-rendering: crisp-edges;
}<div class = "profile-photo">
<img src = "https://i.stack.imgur.com/DrBAT.png">
</div>Вы берете изображение размером 644 пикселя и уменьшаете его до скольких 40 пикселей — 6% от исходной высоты? Это вызовет некоторые искажения.
Изображение профиля в углу на YouTube имеет размер 88 x 88 пикселей, поэтому его уменьшение до 32 x 32 (25%) будет выглядеть намного лучше.
Предложение @Justinas — это все, что вы можете сделать только с помощью CSS. Однако, если вы контролируете всю систему, рассмотрите возможность создания уменьшенной версии любого изображения, которое загружает пользователь. Это не только создаст более четкое изображение, но и зрителю не придется загружать полное изображение, когда ему просто нужна иконка.
Сделайте фото более высокого качества.