Замените изображение фоновым изображением на маленьких экранах

Question

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

Поскольку этот сайт находится в Drupal, я немного не решаюсь изменить тему для этой временной страницы. В идеале, я бы хотел установить образ по умолчанию, чтобы он включал стандартную область, используемую в остальной части сайта.

Если я включил изображение, будет тогда целесообразно на небольших экранах, когда изображение необходимо переключить, чтобы установить display: none; на <img> и применить фоновое изображение для контейнера div? Я думаю, что это сработает, но это похоже на обходное решение.

Есть ли лучший способ обойти это?

Область изображения - это просто <img>, вложенный в ряд <divs>.

Answer 1

Работы вокруг вас упоминают тихо, легко достичь. В этом FIDDLE Я только добавил:

@media (max-width: 600px) { 
    img { 
     opacity:0; 
    position:relative; 
    z-index:-1; 
    -webkit-transition: all 0.3s linear; 
-moz-transition: all 0.3s linear; 
-ms-transition: all 0.3s linear; 
-o-transition: all 0.3s linear; 
transition: all 0.3s linear; 
    } 

только, чтобы сделать переход, но простой дисплей никто так не действует, пока вы можете добавить фоновое изображение для контейнера изображения дел. (z-index должен установить изображение за любым содержимым, которое вы можете иметь в div, особенно ссылки)