retina.js не работает - не знаю почему

Question

retina.js не работает - не знаю почему

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

Я использую retina.js, и он не работает ни для одного из изображений. Изображения @2x находятся в той же папке, что и меньшие. Во-первых, если их размер не в два раза больше - дизайнер прислал мне изображение размером в один или два пикселя - поэтому я не буду беспокоиться об этом, так как предполагаю, что после загрузки других изображений это будет работать при размере правильно.

Я пробовал сокращенный фон: url (foo.jpg).... и background-image: url (foo.jpg) с и без изображений в "". Я смирился с мыслью, что упускаю что-то глупое, и просто не вижу этого. Любая помощь будет оценена!

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../js/index.js"></script>
<script type="text/javascript" src="../js/retina.js"></script>

HTML:

<ul class="grid" id="movie-grid">
<li class="movie">
  <div class="poster"></div>
  <h2 class="title"><a href="foo.html">Title</a></h2>
  <p class="desc">TV Movie</p>
</li>
</ul>

и CSS:

    .poster {
 /*background:url(../images/comingsoon.jpg) no-repeat left top;*/
 background-image:url(../images/comingsoon.jpg);
 background-repeat:no-repeat;
 background-position:left top;
 display:block;
 width:204px;
 height:137px;
 background-size:100%;

 }

3

javascript image retina.js

Источник

user1843781 13 июн '14 в 20:29

1 ответ

Решение

Другие вопросы по тегам javascript image retina.js

user768145 02 июл '14 в 13:22 2014-07-02 13:22 · Accepted Answer · 2014-07-02 13:22

Проблема в том, что вы пытаетесь использовать retina.js для изменения изображения в вашем CSS. Я считаю, что стандартная функциональность retina.js позволяет вам изменять / заменять изображения в вашем HTML-коде следующим образом:

<header>
   <img src="/images/logo.png">
</header>

изменится на

<header>
   <img src="/images/logo@2x.png">
</header>

Чтобы получить retina.js для обмена изображениями в вашей таблице стилей, вам нужно скачать LESS CSS Mixin, предоставленный сайтом retina.js. Затем следуйте инструкциям, которые они обозначают:

Синтаксис: .at2x(@path, [optional] @width: auto, [optional] @height: auto);

шаги:

Добавить .at2x() Mixin от retina.less на вашу LESS таблицу стилей
В вашей таблице стилей, назовите .at2x() миксин где угодно вместо использования background-image

#logo {
  .at2x('/images/my_image.png', 200px, 100px);
}

Будет компилировать в:

#logo { 
   background-image: url('/images/my_image.png');
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  #logo {
    background-image: url('/images/my_image@2x.png');
    background-size: 200px 100px;
  }
}

источники: