Изображения CSS и дисплеи Retina

Question

Использование Chrome на Macbook Pro Retina и Chrome в Windows, я получаю странное поведение, пытаясь отображать изображения для дисплеев сетчатки и сетчатки.

У меня есть ряд квадратных изображений и CSS выглядит следующим образом:

/* NON RETINA */ 

/* style for all square images so no need to repeat */ 
.sq-img-small { 
    background-size: 239px 239px; 
    width:239px; 
    height:239px; 
    float:left; 
    margin:0 0 20px 10px; 
} 

.sq-img-small.img-small-1 { 
    background: url('../images/squares/food1.jpg') no-repeat top left; 
} 


/* RETINA */ 
@media 
    (-webkit-min-device-pixel-ratio: 2),(-moz-device-pixel-ratio: 2), (min-resolution: 192dppx) { 

    .sq-img-small.img-small-1 { 
    background: url('../images/squares/food1.2x.jpg') no-repeat top left; 
    } 

Мой HTML является:

<div class="sq-img-small img-small-1"></div> 

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

Если добавить:

background-size: 239px 239px; 
width:239px; 
height:239px; 

в сетчатке .sq-img-small.img-small-1 блока, то он отображает нормально, но я не думаю, что я должен был бы сделать это, как он должен наследовать от ранее правильно? Или наследование, на которое повлиял блок @media?

=============== UPDATE ==============

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

Answer 1

Просто дайте вам пример. Попробуйте это решение.

/* for low resolution display */ 

.image { 

    background-image: url(/path/to/my/lowreslogo.png); 
    background-size: 200px 300px; 
    height: 300px; 
    width: 200px; 

} 

/* for high resolution display */ 

@media only screen and (min--moz-device-pixel-ratio: 2), 
only screen and (-o-min-device-pixel-ratio: 2/1), 
only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-device-pixel-ratio: 2) { 
.image {  
    background: url(/path/to/my/highreslogo.png) no-repeat;  
    background-size: 200px 400px;  
/* rest of your styles... */ 

} 
} 

Answer 2

Вы, кажется, смешивания точек на дюйм и dppx номера:

в соответствии с этим сайтом, http://brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries/,

Блок dppx новый блок, который равен устройству пикселей используется веб-кит.

Однако блок dppx не так широко поддерживается как единица dpi. Модуль dppx поддерживается в FF 16.0+ и Opera 12.10+.

В настоящее время IE не поддерживает устройства dppx.

(сайт немного старый, и dppx поддерживается Chrome, так как V29)

@media 
only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-resolution: 192dpi), 
only screen and (min-resolution: 2dppx) { 
    /* Retina-specific stuff here */ 
} 

Что разница между dppx и точек на дюйм?

DPI

Это устройство представляет собой число точек на дюйм. Экран обычно содержит 72 или 96 точек на дюйм; печатный документ обычно достигает гораздо большего значения dpi.

DPPX

Это устройство представляет собой число точек на единицу пикселей. Из-за фиксированного отношения CSS 1 к 96 в CSS px 1dppx эквивалентно 96dpi, что соответствует разрешению изображений по умолчанию, отображаемым в CSS, как определено разрешением изображения.

source

пример устройства:

iPhone 4 имеет "экран 3,5, при 640 × 960px. Это вычисляется на экране 326 точек на дюйм, который использует 2dppi или 2 точки на пиксель. Это соотношение 2dppi - это то, что «сетчатка», и почему активы в 2 раза больше. Кроме того, именно поэтому ширина 640px отображается только как 320 пикселей в браузере, потому что она рисует две «точки»/пиксели для каждого пикселя на основе CSS. (граница 1px будет нарисована на двух рядах пикселей)

Answer 3

Возможны две причины, по которым ваша попытка не работает. Свойство background-size не наследуется, и если свойство не указано через background -shorthand, такое свойство сбрасывает background-size.

Таким образом, вы не можете ожидать, что background-size наследоваться от .sq-img-small к .sq-img-small.img-small-1 (но это не может быть проблемой, так как они ссылаются на один и тот же элемент), и потому, что вы используете сокращённое свойство на .sq-img-small.img-small-1 сбросе background-size.

Источник: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size.

Что касается рабочего изображения не-сетчатки; ваше изображение без сетчатки, возможно, размер coorect (239px на 239px) для начала?

Поскольку ваш текущий background-size -ru недействителен, вы можете переместить его в сокращенное свойство и в итоге получить 1 меньше строки css, но немного больше избыточности в background -rules. Это похоже на небольшую жертву, однако, как вы уже no-repeat top left там:

/* style for all square images so no need to repeat */ 
.sq-img-small { 
    width:239px; 
    height:239px; 
    float:left; 
    margin:0 0 20px 10px; 
} 

.sq-img-small.img-small-1 { 
    background: url('../images/squares/food1.jpg') no-repeat top left/239px 239px; 
} 


/* RETINA */ 
@media 
    (-webkit-min-device-pixel-ratio: 2),(-moz-device-pixel-ratio: 2), (min-resolution: 192dppx) { 

    .sq-img-small.img-small-1 { 
    background: url('../images/squares/food1.2x.jpg') no-repeat top left/239px 239px; 
    } 

В качестве альтернативы, вы можете попробовать переместить стенографии из в общем случае, но, кажется, вы пробовали это в обновлении, и это Бесполезный Работа:

/* style for all square images so no need to repeat */ 
.sq-img-small { 
    background: no-repeat top left/239px 239px; 
    width:239px; 
    height:239px; 
    float:left; 
    margin:0 0 20px 10px; 
} 

.sq-img-small.img-small-1 { 
    background-image: url('../images/squares/food1.jpg'); 
} 


/* RETINA */ 
@media 
    (-webkit-min-device-pixel-ratio: 2),(-moz-device-pixel-ratio: 2), (min-resolution: 192dppx) { 

    .sq-img-small.img-small-1 { 
    background-image: url('../images/squares/food1.2x.jpg'); 
    }