Замена картинки средствами CSS

Тема в разделе "Верстка", создана пользователем gullson, 4 мар 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. gullson

    gullson Создатель

    Регистр.:
    30 сен 2013
    Сообщения:
    19
    Симпатии:
    2
    Задача: требуется выводить один статичный баннер для десктопа и другой для мобильника.

    Давать браузеру скачивать нужно только одну картинку, поэтому display:none не подходит.
    В html желательно обойтись только img, либо минимальной допразметкой уровня дивов/спанов.
    Размеры и пропорции картинок разные, поэтому нужно ресайзить под img { max-width: 100%; }.
    Работоспособность критична только для хрома и лисы.

    Код:
    HTML: <img id="banner" alt="banner" src="/images/banner.jpg">
    CSS: #banner:before { content: url(url); }
    Такой способ не работает в лисе

    Примечание: десктопные и мобильные UA обслуживаются разными CSS.
     
  2. Vishez

    Vishez

    Регистр.:
    19 авг 2013
    Сообщения:
    170
    Симпатии:
    81
    Можно сделать через фон дива. Пример тут Перейти по ссылке.
    Также можно использовать min-device-width и прочее, справку смотрите тут Перейти по ссылке
     
    gullson нравится это.
  3. gullson

    gullson Создатель

    Регистр.:
    30 сен 2013
    Сообщения:
    19
    Симпатии:
    2
    Спасибо, с media сталкивался поверхностно, поэтому такой вопрос:

    Надежно ли использовать типы устройств или лучше указывать разрешение в пикселях типа @media screen and (max-width: 45em)?
    Тип handheld закроет все устройства, включая планшеты и раритет типа симбиана и series40, или только относительно свежие мобилы?

    А первый способ не подходит, потому что там размеры картинок жестко прописаны.
    Вообще вся эта кутерьма с заменой затевается только для уменьшения веса странички для мобил, у которых не только разрешения, но pixel-ratio часто совсем разные.
     
  4. Vishez

    Vishez

    Регистр.:
    19 авг 2013
    Сообщения:
    170
    Симпатии:
    81
    Честно говоря, не знаю насколько надежно использовать типы устройств, это надо тестировать на разных устройствах. Handheld как раз и включает в себя планшеты и мобильные устройства, но думаю не лишним будет указать и ширину экрана устройства на всякий случай.
     
  5. kastiel

    kastiel Создатель

    Регистр.:
    3 мар 2014
    Сообщения:
    10
    Симпатии:
    1
    Не пробовал через php вывод делать? Там больше возможностей прописать можно (возможность скрыть closed)
     
    gullson нравится это.
  6. gullson

    gullson Создатель

    Регистр.:
    30 сен 2013
    Сообщения:
    19
    Симпатии:
    2
    Хорошая идея, сам пока додумался только до заголовков, как еще можно определять? Не понял про closed, поясни пож-та.

    PHP:
    <?php


    //определяем мобильники
    $iPhone stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
    $iPad stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
    $Android stripos($_SERVER['HTTP_USER_AGENT'],"Android");
    $webOS stripos($_SERVER['HTTP_USER_AGENT'],"webOS");


    if( 
    $iPhone || $iPad || $Android || $webOS ){

    echo 
    '<img src="mobile.jpg" />';

    }else if(){

    echo 
    '<img src="desktop.jpg" />';

    }

    ?> 
    Есть подозрение, что таким способом далеко не все будет правильно определяться, например, какой-нибудь application built-in viewer.