Перейти к контенту
  • 0

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


DarkBMW

Вопрос

Рекомендуемые сообщения

  • 0

Тут 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;
  }
} 
Ссылка на комментарий
Поделиться на других сайтах

  • 0

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

 

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

Ссылка на комментарий
Поделиться на других сайтах

Присоединиться к обсуждению

Вы можете ответить сейчас, а зарегистрироваться позже. Если у вас уже есть аккаунт, войдите, чтобы ответить от своего имени.

Гость
Ответить на вопрос...

×   Вы вставили отформатированный текст.   Удалить форматирование

  Допустимо не более 75 смайлов.

×   Ваша ссылка была автоматически заменена на медиа-контент.   Отображать как ссылку

×   Ваши публикации восстановлены.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

Зарузка...
×
×
  • Создать...

Важная информация

Находясь на нашем сайте, вы соглашаетесь на использование файлов cookie, а также с нашим положением о конфиденциальности Политика конфиденциальности и пользовательским соглашением Условия использования.