Как сохранить 100% качество картинки

Question

Есть картинка, которая когда вставляю на сайт, теряет качество при адаптиве. Ниже приведен пример как я вставляю на сайт (через css вставлял и тоже ничего не помогает). Так же пробовал через object-fit: none, это помогает, но почему-то когда захожу через ноут, качество плохое, а через ПК хорошее. Нужно сохранить максимальное качество. Картинка сама по себе отличного качества 1-картинка: С object-fit:none 2-картинка: Без object-fit:none 3-картинка: Исходник

div {
  max-width: 500px
  max-height: 300px
  width: 100%;
  height: 100%;
}

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

<div>
  <img>
 </div>

Answer 1

Для начала уберите ошибки в css расставьте точки с запятой.

Для того чтобы изображение хорошего качества вам нужно сделать изображение хорошего качества
Если вы хотите использовать object-fit то почитайте это
Возможно вы работаете в СMS например как WordPress или Bitrix или что подобное. В этом случи проверьте настройки и посмотрите через инспектор какие стили вешаются на изображение.
Не используйте height: 100%;, напишите лучше height: auto; Может разницы нету, но по моему мнению такая запись более верная.
Еще раз проверьте название классов, тегов к которым вы хотите применить стили.
Иногда помогает image-rendering: pixelated;
Используйте векторные изображения или изображения в формате webP

БЛОГ НА HUSL

Как сохранить 100% качество картинки

Ответы (1 шт):