Есть картинка 320x200. Я размещаю ее в блоке шириной 260 пикселей, высота картинки уменьшается пропорционально до 162,5, но экран не может отображать не полное количество пикселей. Я замечаю, что качество картинки хуже, чем когда она была в блоке шириной 320 пикселей. Нужен совет.
-
Перерисуйте картинку под 260 пикселей, что тут ещё можно советовать-то– andreymal10 янв 2018 в 14:37
-
проблема в том что блок меняет размери на разных екранах, он не фиксированый– Алексей Пуха10 янв 2018 в 15:00
-
1Тогда вам придётся смириться с потерей качества, это неизбежное следствие изменения размеров растровой картинки– andreymal10 янв 2018 в 15:04
-
Может это поможет: htmlbook.ru/css/image-rendering– zhurof10 янв 2018 в 16:20
2 ответа
Возможно вам поможет элемент <picture>
. Он позволяет отображать различные изображения для разных размеров экранов.
<picture>
<source srcset="img320x200.jpg" media="(min-width: 769px)">
<source srcset="img200x165.jpg" media="(min-width: 450px)">
<img src="img.jpg">
</picture>
нашел еще одно решение. картинку задаю не через тег img, а через background. в таком случае тот конфликтный пиксель не будет отображатся вообще и картинка не будет терять качество. Для получения такого результата задаю background-size 100% и padding-top в процентах