Как изменить URL изображения, которое генерируется динамически только с помощью CSS и медиа-запросов? - PullRequest
Новая
       4

Как изменить URL изображения, которое генерируется динамически только с помощью CSS и медиа-запросов?

0 голосов
/ 29 января 2012

Я заранее прошу прощения, если задаю вопрос с невозможным ответом.Но я просто подумал, что стоит спросить, может быть, кто-то знает, как добиться того, о чем я прошу.

У меня есть изображение на этой странице ( URL-адрес изображения динамически генерируется на сервере PHP ): 

<img src="/images_BIG/image_12345.jpg" />

Теперь - я бы хотел использовать только медиа-запросы CSS для изменения URL этого изображения, скажем так (когда ширина области просмотра браузера меньше, например, 800px): 

<img src="/images_SMALL/image_12345.jpg" />

Я знаю, что это может быть сделано с помощью PHP (обнаружение мобильных браузеров и возвращение соответствующего URL) или использование Javascript для изменения URL на лету.Но возможно ли это с помощью CSS3?Я нацелен только на браузеры HTML5, поэтому не нужно заботиться об IE.

Спасибо за любые мысли и помощь заранее.

Ответы [ 3 ]

0 голосов
/ 29 января 2012

Ну, как я прочитал ваш комментарий ... если единственная проблема заключается в включении переменных URL-адресов в таблицу стилей css ... как насчет просто php включения (рендеринга) таблицы стилей (обернутой тегом <style>) в результирующийHTML?Тогда вы можете использовать <?php echo $imageUrl ?> в месте ссылки.Я никогда не делал этого раньше, это может быть глупой идеей, но сейчас мне это кажется возможным.

0 голосов
/ 29 января 2012

Оберните изображение в div.Сначала используйте мобильное устройство, чтобы оно загружало только небольшую версию изображения на маленьких экранах.На больших экранах изображение будет скрыто, и вместо него будет фоновое изображение.

Два недостатка - несемантический упаковочный div и необходимость указать высоту и ширину div.Плюс в том, что вы получаете изображение переднего плана в HTML.

HTML 

<div class="imgContainer"><img src="/images_SMALL/image_12345.jpg" /></div>

CSS 

// for screens bigger than 800px
@media screen and (min-device-width:800px) {
  div.imgContainer {
    background-image:url(../images_BIG/image_12345.jpg);
    background-size:100px;
    width:100px;
    height:100px;
  }
  img {
    display:none;
  }
}

РЕДАКТИРОВАТЬ На основе вашего комментария вышеЯ бы сказал, добавьте упаковочный div и установите его фоновое изображение с помощью jQuery.

0 голосов
/ 29 января 2012

Вы можете установить другой файл CSS в зависимости от ваших медиа-запросов: 

#image1 { background: url('/images_BIG/image_12345.jpg'); width: 600px; height: 200px; }
@media screen and (max-device-width: 480px) {
 #image1 { background: url('/images_SMALL/image_12345.jpg'); width: 300px; height: 100px; }
}

В этом случае вы бы отошли от тега IMG к другому тегу (<span id="image1"></span>).

...