У меня есть баннер, который прокручивает несколько изображений с помощью модуля MD-Slider (JCarousel). Сайт реагирует, следовательно, будет 3 различных макетов любого изображения внутри баннера:CSS Замените изображение, обратившись к URL-адресу изображения
Normal Разрешение: 
Layout для IPADS и больших таблеток: 
Layout для мобильных устройств: 
В настоящее время я использовал временные изображения на баннере следующим образом:
banner1.jpg
banner1-iPad.jpg
banner1-mobile.jpg
Таким образом, «banner1» - это ключ. Это как мой DIV выглядит для нормального расположения:
<div class="md-slide-item slide-1" data-timeout="8000" data-thumb="http://xxxxxxxxxx.com/TestWebsite/sites/default/files/styles/md_slider_1_thumb/public/banner1.jpg?itok=y4RT2g4r" style="height: 268px; left: 0px; top: 0px; opacity: 1; display: block;">
<div class="md-mainimg">
<img class = "mdslider-img-tag" src="http://xxxxxxxxxx.com/TestWebsite/sites/default/files/banner1.jpg" alt="" style="width: 100%; height: auto; top: -59.3653846153846px; left: 0px;">
</div>
<div class="md-objects" style="font-size: 99%;">
</div>
</div>
Я могу использовать класс mdslider-img-tag заменить изображение в CSS, используя некоторые из литературы, указанной ниже:
1. https://css-tricks.com/replace-the-image-in-an-img-with-css/
Однако, моя проблема заключается в том, чтобы ключ «banner1» внутри CSS перед добавлением -ip объявление или -mobile часть текста, чтобы отображалось правильное изображение для макета.
Есть ли элегантный способ достичь этого?
Почему бы вам не сделать это с помощью фоновых изображений + медиа-запросов? – Stickers
Как было предложено на @sdcr выше. Вместо этого вы можете использовать медиа-запросы. Это легче. Поэтому вам было бы намного легче. – Arvs
Это то, что я хочу сделать, но как задано в вопросе, мне понадобится имя изображения, которое в настоящее время отображается слайдером, чтобы я мог добавить к нему «-iPad» или «-mobile», чтобы отображался слайдер правое изображение. –