更改基於屏幕

的寬度IMG路徑我有一個HTML行：更改基於屏幕

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

有沒有什麼辦法來調用不同的IMG路徑時屏幕< 400像素？

這是一個滑塊的一部分，我寧願避免進入CSS。我認爲應該有正確的HTML裏面一個簡單的解決方案 - 像srcset，它不適合某些原因：與<img>

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

我也試過數據媒體屬性，但沒有運氣：

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

社區幫助需要嚴重。

來源

2016-09-17 Maxim Mezhenkov

爲什麼不使用正確的元素？ '' – Brad

你可以試試這個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" />

來源

2016-09-17 20:30:24

他提到他需要使用不同的圖像嗎？ –

但使用這個他不需要@media查詢，這將像自動響應一樣工作。 –

我認爲是使用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。

來源

2016-09-17 20:30:31

用適當的類添加兩個圖片到頁面，使用CSS媒體查詢隱藏和顯示相關。帶顯示none的圖像不會在初始頁面加載時加載。

實施例：

HTML：

CSS：的.desktop {顯示：塊; } .mobile {display：none; }

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

來源

2016-09-17 20:59:17

更改基於屏幕

回答

相關問題