Перейти к содержимому


Фотография

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

Форумы IBResource

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 4
DarkBMW
  • Участники
  • Cообщений: 58
  • http://www.bmwclub.by
  • Город:Minsk
  • Интересы:BMW

Отправлено

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



Denis Chursinov
  • Клиенты
  • Cообщений: 659

Отправлено

Тут 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
  • Участники
  • Cообщений: 58
  • http://www.bmwclub.by
  • Город:Minsk
  • Интересы:BMW

Отправлено

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

 

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



Denis Chursinov
  • Клиенты
  • Cообщений: 659

Отправлено

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



DarkBMW
  • Участники
  • Cообщений: 58
  • http://www.bmwclub.by
  • Город:Minsk
  • Интересы:BMW

Отправлено

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






Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных