Ретина лого в 3.4.* - как сделать?

[DarkBMW]

Может кто подскажет, как сдалать ретина лого в 3.4.* версии? 

[Denis Chursinov]

Тут 3 варианта. 

 

Обычно лого это элемент img .
Первый вариант - картинку положить в 2 раза большего разрешения, а в элементе img выставить width и height в 2 раза меньше.  Есть у вас задумка сделать лого 300 на 100. Значит реальная картинка должна быть 600 на 200, а уменьшена до 300 на 100 уже в свойствах элемента.

Второй вариант - подгрузить retina.js, который для всех картинок на странице будет пытаться загрузить @2 версии. http://retinajs.com/
Третий вариант, это сделать лого фиксированным  по размеру блоком, а картинку в него вставлять в качестве фона. Тогда ретину можно будет подгрузить через медиа-запрос в css
 

/*CSS для обычных экранов:*/
.logo{
  width: 300px;
  height: 100px;
  background-image: url(logo.png);
}

/*CSS срабатывающий на retina, у нее будет соответствующий "device-pixel-ratio":*/
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
  .logo{
    background-image: url(logo@2x.png);
    background-size: 300px 100px;
  }
} 

[DarkBMW]

Первый вариант - картинку положить в 2 раза большего разрешения, а в элементе img выставить width и height в 2 раза меньше.  Есть у вас задумка сделать лого 300 на 100. Значит реальная картинка должна быть 600 на 200, а уменьшена до 300 на 100 уже в свойствах элемента.

 

А где находится код для этого варианта? Заранее спасибо!

[Denis Chursinov]

В глобальных шаблонах - defaultHeader

[DarkBMW]

Спасибо, всё красиво получилось