|
|
Регистрация Восстановить пароль |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
18.09.2022, 19:45 | #1 |
Новичок
Джуниор
Регистрация: 18.09.2022
Сообщений: 4
|
HiDPI и растягивание картинок
Уже давно бъюсь с проблемой на своём сайте про хобби, в static HTML что ни вставь в IMG, в каких только величинах не задавай размер картинки, всё равно они увеличиваются в соответствии с масштабом системы во всех браузерах. Даже если открыть в браузере просто картинку по ссылку в явном виде, всё равно она распухает и становится мыльной. Есть ли какой-то способ отображать картинки без этого автоматического масштабирования?
Например, в firefox можно вручную отредактировать параметр layout.css.devPixelsPerPx, но это локальная настройка, и она действует на всё, не только на картинки. А можно ли что-то придумать, чтобы просто картинки не масштабировались из-за системного масштаба? Кажется в CSS есть параметр scale, можно масштабировать на обратную величину. Но как узнать текущий масштаб удалённой системы? |
18.09.2022, 20:52 | #2 |
Участник клуба
Регистрация: 17.04.2022
Сообщений: 1,833
|
А пробовали у изображения устанавливать Width и Height как у самой картинки? Или системный масштаб их тоже увеличивает.
|
19.09.2022, 16:09 | #3 |
Пользователь
Регистрация: 02.05.2022
Сообщений: 81
|
Тут правильно пишет macomics нужно задать картинке Width и Height(например width:300px; и height:350px которую вам нужно и не забудьте обязательно написать max-width: 100%; после этого у вас картинка больше размера которого вы указали в Width и Height не будет.
Последний раз редактировалось BDA; 20.09.2022 в 05:29. |
19.09.2022, 17:44 | #4 |
Участник клуба
Регистрация: 17.04.2022
Сообщений: 1,833
|
Только если он сражается с внешней функцией применяемой ко всему окну браузера - дохлый номер. Винда хочешь не хочешь будет растягивать изображения. Есть вариант использовать, скажем, jpeg большого размера с информацией для предпросмотра, чтобы на системах с низким DPI она быстро отображалась.
|
19.09.2022, 20:41 | #5 |
Новичок
Джуниор
Регистрация: 18.09.2022
Сообщений: 4
|
Да всё перепробовано, Width и Height изначально стоят. max-width: 100% тоже пробовал. Это именно системный масштаб, он всё растягивает. Физически картинка занимает на экране больше пикселей.
Причём это можно починить, используя css:scale (0.8) например. 0.8 - для системного масштаба 125%, 0.666 для 150%. Но как узнать текущий системный масштаб пользователя... |
19.09.2022, 20:46 | #6 |
Участник клуба
Регистрация: 17.04.2022
Сообщений: 1,833
|
Так вы вряд ли что-то исправите. У вас будет браузером сначала уменьшаться картинка ухудшая качество, а потом окно браузера с уже уменьшенной картинкой будет растягиваться ОС на уровне картинки (изображения на экране) еще больше увеличивая гранулярность.
|
19.09.2022, 20:52 | #7 |
Новичок
Джуниор
Регистрация: 18.09.2022
Сообщений: 4
|
На самом деле применяя правильный scale, картинки становятся чёткими, вижу своими глазами. Интересует, есть ли способ узнать pixelratio из браузера и применить нужный scale?
|
24.09.2022, 15:57 | #8 |
Новичок
Джуниор
Регистрация: 18.09.2022
Сообщений: 4
|
Нашёл кажется вариант:
@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, или от хостинга какие-то требования нужны? |
24.09.2022, 16:50 | #9 | |
Пользователь
Регистрация: 02.05.2022
Сообщений: 81
|
Цитата:
|
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Растягивание фрейма | volni | HTML и CSS | 0 | 27.01.2020 11:50 |
Растягивание формулы | fadsozaur | Microsoft Office Excel | 28 | 08.08.2013 17:54 |
Растягивание фигур. | KOPC1886 | C# (си шарп) | 4 | 03.05.2011 13:04 |
Растягивание фона | psywalker | HTML и CSS | 7 | 19.06.2008 18:08 |