Форум программистов
 
Регистрация на форуме тут, о проблемах пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail, а тут можно восстановить пароль

Купить рекламу на форуме 15-35 тыс рублей в месяц

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Ответ
 
Опции темы Поиск в этой теме
Старый 18.09.2022, 19:45   #1
DeepDig
Новичок
Джуниор
 
Регистрация: 18.09.2022
Сообщений: 4
По умолчанию HiDPI и растягивание картинок

Уже давно бъюсь с проблемой на своём сайте про хобби, в static HTML что ни вставь в IMG, в каких только величинах не задавай размер картинки, всё равно они увеличиваются в соответствии с масштабом системы во всех браузерах. Даже если открыть в браузере просто картинку по ссылку в явном виде, всё равно она распухает и становится мыльной. Есть ли какой-то способ отображать картинки без этого автоматического масштабирования?
Например, в firefox можно вручную отредактировать параметр layout.css.devPixelsPerPx, но это локальная настройка, и она действует на всё, не только на картинки. А можно ли что-то придумать, чтобы просто картинки не масштабировались из-за системного масштаба? Кажется в CSS есть параметр scale, можно масштабировать на обратную величину. Но как узнать текущий масштаб удалённой системы?
DeepDig вне форума Ответить с цитированием
Старый 18.09.2022, 20:52   #2
macomics
Форумчанин
 
Регистрация: 17.04.2022
Сообщений: 899
По умолчанию

А пробовали у изображения устанавливать Width и Height как у самой картинки? Или системный масштаб их тоже увеличивает.
macomics вне форума Ответить с цитированием
Старый 19.09.2022, 16:09   #3
Вадим Фролов
Пользователь
 
Аватар для Вадим Фролов
 
Регистрация: 02.05.2022
Сообщений: 35
По умолчанию

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

Последний раз редактировалось BDA; 20.09.2022 в 05:29.
Вадим Фролов вне форума Ответить с цитированием
Старый 19.09.2022, 17:44   #4
macomics
Форумчанин
 
Регистрация: 17.04.2022
Сообщений: 899
По умолчанию

Только если он сражается с внешней функцией применяемой ко всему окну браузера - дохлый номер. Винда хочешь не хочешь будет растягивать изображения. Есть вариант использовать, скажем, jpeg большого размера с информацией для предпросмотра, чтобы на системах с низким DPI она быстро отображалась.
macomics вне форума Ответить с цитированием
Старый 19.09.2022, 20:41   #5
DeepDig
Новичок
Джуниор
 
Регистрация: 18.09.2022
Сообщений: 4
По умолчанию

Да всё перепробовано, Width и Height изначально стоят. max-width: 100% тоже пробовал. Это именно системный масштаб, он всё растягивает. Физически картинка занимает на экране больше пикселей.
Причём это можно починить, используя css:scale (0.8) например. 0.8 - для системного масштаба 125%, 0.666 для 150%. Но как узнать текущий системный масштаб пользователя...
DeepDig вне форума Ответить с цитированием
Старый 19.09.2022, 20:46   #6
macomics
Форумчанин
 
Регистрация: 17.04.2022
Сообщений: 899
По умолчанию

Так вы вряд ли что-то исправите. У вас будет браузером сначала уменьшаться картинка ухудшая качество, а потом окно браузера с уже уменьшенной картинкой будет растягиваться ОС на уровне картинки (изображения на экране) еще больше увеличивая гранулярность.
macomics вне форума Ответить с цитированием
Старый 19.09.2022, 20:52   #7
DeepDig
Новичок
Джуниор
 
Регистрация: 18.09.2022
Сообщений: 4
По умолчанию

На самом деле применяя правильный scale, картинки становятся чёткими, вижу своими глазами. Интересует, есть ли способ узнать pixelratio из браузера и применить нужный scale?
DeepDig вне форума Ответить с цитированием
Старый 24.09.2022, 15:57   #8
DeepDig
Новичок
Джуниор
 
Регистрация: 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, или от хостинга какие-то требования нужны?
DeepDig вне форума Ответить с цитированием
Старый 24.09.2022, 16:50   #9
Вадим Фролов
Пользователь
 
Аватар для Вадим Фролов
 
Регистрация: 02.05.2022
Сообщений: 35
По умолчанию

Цитата:
Сообщение от 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, или от хостинга какие-то требования нужны?
Крутяк!!!
Вадим Фролов вне форума Ответить с цитированием
Ответ
Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Растягивание фрейма 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