HiDPI и растягивание картинок

[DeepDig]

Уже давно бъюсь с проблемой на своём сайте про хобби, в static HTML что ни вставь в IMG, в каких только величинах не задавай размер картинки, всё равно они увеличиваются в соответствии с масштабом системы во всех браузерах. Даже если открыть в браузере просто картинку по ссылку в явном виде, всё равно она распухает и становится мыльной. Есть ли какой-то способ отображать картинки без этого автоматического масштабирования?
Например, в firefox можно вручную отредактировать параметр layout.css.devPixelsPerPx, но это локальная настройка, и она действует на всё, не только на картинки. А можно ли что-то придумать, чтобы просто картинки не масштабировались из-за системного масштаба? Кажется в CSS есть параметр scale, можно масштабировать на обратную величину. Но как узнать текущий масштаб удалённой системы?

[macomics]

А пробовали у изображения устанавливать Width и Height как у самой картинки? Или системный масштаб их тоже увеличивает.

[Вадим Фролов]

Тут правильно пишет macomics нужно задать картинке Width и Height(например width:300px; и height:350px которую вам нужно и не забудьте обязательно написать max-width: 100%; после этого у вас картинка больше размера которого вы указали в Width и Height не будет.

[macomics]

Только если он сражается с внешней функцией применяемой ко всему окну браузера - дохлый номер. Винда хочешь не хочешь будет растягивать изображения. Есть вариант использовать, скажем, jpeg большого размера с информацией для предпросмотра, чтобы на системах с низким DPI она быстро отображалась.

[DeepDig]

Да всё перепробовано, Width и Height изначально стоят. max-width: 100% тоже пробовал. Это именно системный масштаб, он всё растягивает. Физически картинка занимает на экране больше пикселей.
Причём это можно починить, используя css:scale (0.8) например. 0.8 - для системного масштаба 125%, 0.666 для 150%. Но как узнать текущий системный масштаб пользователя...

[macomics]

Так вы вряд ли что-то исправите. У вас будет браузером сначала уменьшаться картинка ухудшая качество, а потом окно браузера с уже уменьшенной картинкой будет растягиваться ОС на уровне картинки (изображения на экране) еще больше увеличивая гранулярность.

[DeepDig]

На самом деле применяя правильный scale, картинки становятся чёткими, вижу своими глазами. Интересует, есть ли способ узнать pixelratio из браузера и применить нужный scale?

[DeepDig]

Нашёл кажется вариант:
@media only screen and (min--moz-device-pixel-ratio: 1.25),
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-device-pixel-ratio: 1.25) {
img {
--pic-width: 460px;
width: calc(var(--pic-width) / 1.25 - var(--pic-width) + var(--pic-width));
}

Ну понятно, таких блоков надо сделать на все варианты масштабирования, но почему-то не работает. Подскажите, @media должен работать просто в html, или от хостинга какие-то требования нужны?

[Вадим Фролов]

Сообщение от DeepDig

Нашёл кажется вариант:
@media only screen and (min--moz-device-pixel-ratio: 1.25),
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-device-pixel-ratio: 1.25) {
img {
--pic-width: 460px;
width: calc(var(--pic-width) / 1.25 - var(--pic-width) + var(--pic-width));
}

Ну понятно, таких блоков надо сделать на все варианты масштабирования, но почему-то не работает. Подскажите, @media должен работать просто в html, или от хостинга какие-то требования нужны?

Крутяк!!!