Изображения Retina, фоновые изображения с высоким разрешением

Ответ 1

Нет, но вам нужно установить свойство background-size в соответствии с исходными размерами:

@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 

    .box{
        background:url('images/[email protected]') no-repeat top left;
        background-size: 200px 200px;
    }
}

ИЗМЕНИТЬ

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

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 

}

- Источник

NB. Это min--moz-device-pixel-ratio: не опечатка. Это хорошо документированная ошибка в некоторых версиях Firefox и должна быть написана так, чтобы поддерживать более старые версии (до Firefox 16). - Источник

Как @LiamNewmarch, упомянутая в комментариях ниже, вы можете включить background-size в сокращенное объявление background так:

.box{
    background:url('images/[email protected]') no-repeat top left / 200px 200px;
}

Однако я лично не советую использовать сокращенную форму, поскольку она не поддерживается в iOS <= 6 или Android, что делает ее ненадежной в большинстве ситуаций.

Ответ 2

Здесь решение, которое также включает в себя High (er) DPI (MDPI) устройствa > ~ 160 точек на дюйм, например немало не-iOS-устройств (fe: Google Nexus 7 2012):

.box {
    background: url( 'img/box-bg.png' ) no-repeat top left;
    width: 200px;
    height: 200px;
}
@media only screen and ( -webkit-min-device-pixel-ratio: 1.3 ),
       only screen and (    min--moz-device-pixel-ratio: 1.3 ),
       only screen and (      -o-min-device-pixel-ratio: 2.6/2 ), /* returns 1.3, see Dev.Opera */
       only screen and (         min-device-pixel-ratio: 1.3 ),
       only screen and ( min-resolution: 124.8dpi ),
       only screen and ( min-resolution: 1.3dppx ) {

       .box {
           background: url( 'img/[email protected]' ) no-repeat top left / 200px 200px;
       }

}

Как @3rror404, включенный в его редактирование после получения отзывов от комментариев, есть мир за пределами Webkit/iPhone. Одна вещь, которая вызывает у меня проблемы с большинством решений вокруг до сих пор, таких как ссылка на источник выше CSS-Tricks, заключается в том, что это не принимается полностью учитывать.
исходный источник пошел уже дальше.

В качестве примера экран Nexus 7 (2012) - экран TVDPI со странным device-pixel-ratio of 1.325. При загрузке изображений с нормальным разрешением они масштабируются с помощью интерполяции и, следовательно, размыты. Для меня, применяя это правило в медиа-запросе, чтобы включить эти устройства, удалось получить лучшую обратную связь с клиентами.

Ответ 3

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

.sprite-of-icons {
  background: url("../images/icons-in-four-quad-of-200by200.png") no-repeat;
  background-size: 100px 100px /* Scale it down to 50% rather using 200x200 */
}

.sp-logo-1 { background-position: 0 0; }

/* Reduce positioning of the icons down to 50% rather using -50px */
.sp-logo-2 { background-position: -25px 0; }
.sp-logo-3 { background-position: 0 -25px; }
.sp-logo-3 { background-position: -25px -25px; }

Масштабирование и позиционирование значков спрайтов на 50% по сравнению с фактическим значением, вы можете получить ожидаемый результат.