Изменения IMG пути, основанный на ширину экрана

Question

У меня есть HTML строка:

<img alt="Slider Background" class="background-image" src="img/slide1.jpg" /> 

Есть ли способ, чтобы вызвать другой путь IMG, когда экран < 400px?

Это часть слайдера, и я бы предпочел не попасть в css. Я считаю, что должно быть простое решение прямо в HTML - как srcset, который не работает по какой-то причине:

<img src="img/slide1mini.jpg" srcset="img/slide1.jpg 400w"/> 

Я также попытался атрибута данных медиа с <img>, но не повезло:

<img src="img/slide1mini.jpg" data-media="(max-width: 400px)" /> 
<img src="img/slide1.jpg" data-media="(min-width: 401px)" /> 

Помощь сообщества необходима плохо.

Answer 1

вы можете попробовать это Live FIDDLE

[.img реагирующих на пользовательский класс в
бутстрапе] Вы можете использовать пользовательский класс, как для вашего сайта.

.img-responsive { 
display: block; 
min-width: 100%; 
height: auto; 
    } 

// который вы размещаете в вашей HTML части как этот

<img class="img-responsive" src="demo.jpg"/> 

для фонового изображения вы можете просто изменить высоту:! 100vh важно; и ширина: 100%; здесь снова молотого Пример изображения

.img-responsive { 
 
    display: block; 
 
    width: 100%; 
 
    min-height: 100vh; 
 
} 
 

 

<img alt="Slider Background" class="img-responsive" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQGZQ54YTm4Te6RYbyrhYzs-FusS0HjKwpp8GlhpoH67XRHP6Js" />

Answer 2

Лучше всего я думаю, что было бы использовать background-image вместо <img> тега, который вы можете изменять с помощью медиа запросов.

Например,

<div class="img"></div> 

.img{ 
background-image:url('//your link') 
} 

Теперь вы можете использовать медиа-запросы, чтобы изменить изображение. Например:

@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (-webkit-min-device-pixel-ratio: 1) { 
    .img{ 
     //change image url 
    } 


} 

Вы можете прочитать больше о медиа запросов here.

Answer 3

Добавьте два imgs на страницу с соответствующими классами, используйте css media-запросы, чтобы скрыть и показать соответствующие. Изображения с дисплеем none не будут загружены при начальной загрузке страницы.

Пример:

HTML:

УС: .desktop {дисплей: блок; } .mobile {дисплей: нет; }

@media all and (max-width: 400px){ 
    .desktop { display: none; } 
    .mobile { display: block; } 
}