Как пиксели изображения обрабатываются в веб-браузерах?

Question

В W3C документации говорится следующее:

пикселей (точек) являются относительно устройства просмотра. Для устройств с низким разрешением на дюйм 1 пиксель - это один пиксель устройства (точка) дисплея. Для принтеров и экранов с высоким разрешением 1px подразумевает несколько пикселей устройства.

Этот вид имеет смысл для стандартных элементов, таких как divs и tables. Если экран имеет большую плотность пикселей, более реальные пиксели зарезервированы для пикселя CSS, чтобы сохранить фактический размер элемента примерно равным на всех экранах, независимо от их плотности. В этом смысле пиксели CSS можно рассматривать как псевдо-абсолютную меру длины.

Но как насчет изображений? Я знаю, что плохая практика позволяет браузеру изменять размеры изображений. Но как обрабатываются пиксели исходного изображения? Я полагаю, что он не может быть таким же, как и другие элементы, иначе я бы получил изображение с низким разрешением на экране с высокой плотностью, учитывая, что больше пикселей устройства назначается одному пикселю изображения.

Answer 1

Если разрешение изображения меньше разрешения экрана, графическая карта добавит пиксели, чтобы изображение заполнило нужные пиксели.

Так что, если ваше изображение имеет то же разрешение, что и ваш экран, каждый пиксель изображения отображается в каждом пикселе вашего экрана.

Но если ваше изображение имеет более низкое разрешение, чем ваш экран, и если графическая карта не выполнит эту работу, ваше изображение будет меньше, потому что у него недостаточно пикселей для заполнения фактического разрешения экрана.

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

Очевидно, что если вы изображаете, если полный черный пиксель, средний цвет черно-черного - черный, поэтому изображение не будет растянуто.