Как вы справляетесь с подачей изображений на экраны с разным dpi? - PullRequest
Новая
       7

Как вы справляетесь с подачей изображений на экраны с разным dpi?

0 голосов
/ 02 июля 2018

У меня есть изображения с разным dpi. Как вы обрабатываете изображения для экранов с разным dpi? вот что у меня так далеко. 

 @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (-o-device-pixel-ratio: 3/2), 
    only screen and (min-device-pixel-ratio: 1.5) {

        //high resolution images go here

    }

Это правильный способ обработки изображений с разными точками на дюйм?

1 Ответ

0 голосов
/ 02 июля 2018

Лучший способ работать с изображениями различных размеров (отзывчивыми) в сочетании с сетчаткой - это использовать scrset / размеры, здесь вы предоставляете информацию о браузере, необходимую для выбора наилучшего изображения для использования.

https://ericportis.com/posts/2014/srcset-sizes/

<img src="small.jpg"
 srcset="large.jpg 1024w,
         medium.jpg 640w,
         small.jpg 320w"
 sizes="(min-width: 36em) 33.3vw,
        100vw"
 alt="Alttext" />

например. это изображение имеет ширину 33,3% от порта просмотра (33.3vw), когда область просмотра больше 36em (здесь возможно значение пикселя). Браузер подсчитывает, сколько пикселей необходимо для текущих размеров окна просмотра (а также включает в себя разрешение экрана), а затем выбирает из заданных размеров изображения, чтобы изображение имело наилучшее соответствие.

...