爲較小的屏幕分辨率加載不同的內嵌圖像

我試圖根據屏幕分辨率加載不同的內嵌圖像（較小的分辨率等於較小的圖像）。在這一刻我有：爲較小的屏幕分辨率加載不同的內嵌圖像

<img class="lazy" data-original="img1.jpg" src="img1.jpg" alt="" 
    height="638" width="1349">

在過去，我用過背景圖像和媒體查詢。有沒有辦法使用內嵌圖像來做到這一點？

來源

2014-03-26 user3462744

我認爲最好的辦法是這樣的：但它仍然是一個工作草案，並沒有（寬）的支持尚未

<picture> 
    <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x"> 
    <source srcset="small.jpg 1x, small-hd.jpg 2x"> 
    <img src="fallback.jpg" alt=""> 
</picture>

更多responsive images。

現在你可能想使用picturefill的JavaScript：

<span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> 
    <span data-src="small.jpg"></span> 
    <span data-src="medium.jpg"  data-media="(min-width: 400px)"></span> 
    <span data-src="large.jpg"  data-media="(min-width: 800px)"></span> 
    <span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span> 

    <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --> 
    <noscript> 
     <img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> 
    </noscript> 
</span>

來源

2014-03-26 11:57:06

感謝您的建議，我真的很感激！ – user3462744

-1

@media和內容可用於acheive是

@media screen and (max-width: 600px) { 
     .lazy{ 
     content:url(" // image url "); 
     } 

    }

文選：

的Chrome 14.0.835.163
的Safari 4.0.5
歌劇院10.6

不不工作：
FireFox 27.0
IE 11.0

來源

2014-03-26 11:29:40 Neil

它進行測試。有用。 – Neil

你能舉個實例嗎？ – CBroe

[JSFIDDLE DEMO]（http://jsfiddle.net/gurunave/LshVM/）更改輸出窗口大小以查看差異。 – Neil

精細

刪除圖片大小（IMG）標籤，並設置圖像高度N的類寬度= 「懶」在css文件

現在對於第二部分圖像的大小取決於屏幕分辨率

你需要CSS文件中使用媒體查詢

例如

@media (min-width:320px) { .lazy{height: 200px; width: 300px;} } 

@media (min-width:481px) { .lazy{height: 250px; width: 350px;} }

現在，當這一形象在小開手機/設備，圖像尺寸將變爲200x300

如果此圖像在平板電腦中打開，圖像尺寸將更改爲250x350

，你可以在網上找到更多的介質尺寸

希望這個解決您的proble

有一個愉快的一天

來源

2014-03-26 12:28:06 fahd4007

爲較小的屏幕分辨率加載不同的內嵌圖像

回答

相關問題