-1

Есть картинка, которая когда вставляю на сайт, теряет качество при адаптиве. Ниже приведен пример как я вставляю на сайт (через 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>

c object-fit:none

без object-fit:none

Исходник

11
  • 2
    Ничего не понятно. Какая картинка? Что такое «хорошее» и «плохое» качество? Вы уверены, что у вас на ноутбуке не накручен масштаб например?
    – andreymal
    9 сен 2021 в 12:20
  • Исходная картинка - это хорошее качество. При загрузке ее на сайт, качество ухудшается. Нет, не накручен
    – Павел
    9 сен 2021 в 12:31
  • 3
    Всё ещё ничего не понятно. Приложите картинку, составьте минимальный воспроизводимый пример, покажите скриншоты «хорошего» и «плохого» качества с действующим object-fit:none
    – andreymal
    9 сен 2021 в 12:33
  • Все, добавил. 1-картинка: С object-fit:none 2-картинка: Без object-fit:none 3-картинка: Исходник
    – Павел
    9 сен 2021 в 12:40
  • И вообще хотелось бы еще узнать, какие есть способы, чтобы сохранить максимально хорошее качество картинки при загрузке на сайт
    – Павел
    9 сен 2021 в 12:42

1 ответ 1

1

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.