0

Есть картинка 320x200. Я размещаю ее в блоке шириной 260 пикселей, высота картинки уменьшается пропорционально до 162,5, но экран не может отображать не полное количество пикселей. Я замечаю, что качество картинки хуже, чем когда она была в блоке шириной 320 пикселей. Нужен совет.

4
  • Перерисуйте картинку под 260 пикселей, что тут ещё можно советовать-то
    – andreymal
    10 янв 2018 в 14:37
  • проблема в том что блок меняет размери на разных екранах, он не фиксированый 10 янв 2018 в 15:00
  • 1
    Тогда вам придётся смириться с потерей качества, это неизбежное следствие изменения размеров растровой картинки
    – andreymal
    10 янв 2018 в 15:04
  • Может это поможет: htmlbook.ru/css/image-rendering
    – zhurof
    10 янв 2018 в 16:20

2 ответа 2

1

Возможно вам поможет элемент <picture>. Он позволяет отображать различные изображения для разных размеров экранов.

<picture>
  <source srcset="img320x200.jpg" media="(min-width: 769px)">
  <source srcset="img200x165.jpg" media="(min-width: 450px)">
  <img src="img.jpg">
</picture>

0

нашел еще одно решение. картинку задаю не через тег img, а через background. в таком случае тот конфликтный пиксель не будет отображатся вообще и картинка не будет терять качество. Для получения такого результата задаю background-size 100% и padding-top в процентах

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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