Как задать картинки под ретину?

Question

[offsiderst]

https://jsfiddle.net/toad9kbL/1/

Comments

[Rustam Bainazarov]

https://developer.mozilla.org/ru/docs/Learn/HTML/M...

[Ankhena]

Фоновые через media, контентные через picture

[offsiderst]

Ankhena, примерно такая суть?
https://jsfiddle.net/r0jap9dt/

[Rustam Bainazarov]

offsiderst, вот так:

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .some-image {
    background: url(http://via.placeholder.com/200x200) 100px 100px;
  }
}

Учтите, что современные смартфоны в своём большинстве имеют степень масштаба x3. Масштаб x2 уже только у весьма бюджетных или старых устройств.

[Ankhena]

offsiderst,

@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution:144dpi),(min-resolution:1.5dppx)

1.5 или 2 и/или еще отдельную под 3

[offsiderst]

Рустам Байназаров, спасибо, если хотите - можете в ответ написать - отмечу)

Answer 1

[Rustam Bainazarov]

Для img:
https://developer.mozilla.org/ru/docs/Learn/HTML/M...

Для CSS:

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .some-image {
    background: url(http://via.placeholder.com/200x200) 100px 100px;
  }
}

Учтите, что современные смартфоны в своём большинстве имеют степень масштаба x3. Масштаб x2 уже только у весьма бюджетных или старых устройств.

Comments

[offsiderst]

Рустам Байназаров , спасибо, а не подскажете, пожалуйста, как можно протестировать?