檢測寬度並使用響應式圖像

我有一個應用程序自動設置照片的寬度。問題是，它有時會定義比原始圖像更大的尺寸：例如：此「a.jpg」寬500px，600px用於定義顯示時的應用程序。檢測寬度並使用響應式圖像

對於一些限制佈局，我沒有辦法改變它。我想，當應用程序定義的圖像大小大於原始大小時，它使用另一張照片。 EX：如果應用程序定義寬度爲600px，圖像「a.jpg」爲500px，那麼它將使用寬度爲700px的「b.jpg」。

的形象是這樣的代碼：

<article class="tile"> 
      <a href="photos/1.jpg"> 
       <img class="item" src="../img/fotos/10medium.jpg" /> 
      </a> 
</article>

有辦法做到這一點？由於

來源

2013-06-29 Ana Paula

使用CSS媒體查詢並檢測可見屏幕的大小可能會更有效，而不是應用程序定義爲元素「寬度」的大小。 – Ohgodwhy

我該怎麼做？ –

是通過使用jQuery你可以做這樣的

var img = $('img'); 
$('<img>').attr('src', img.attr('src')).load(function() { 
    if (img.width() > this.width) { 
    img.attr('src', 'big-image.jpg'); 
    } 
});

來源

2013-06-29 22:09:11

'（window）.width（）'會檢測屏幕的大小嗎？或者我錯了？我編輯了一些代碼。 –

是的，'$（window）.width（）'會檢測瀏覽器窗口的大小 –

我不喜歡瀏覽器的寬度。我想要比較寬度設置在HTML「寬度」與原始寬度在'img src' 類似：'if（$（'img'）。width（）> $（'src to image'）。width（））' –

是一個jQuery插件的選項？我認爲Responsive Img可以做你想做的事情，但它可能無法滿足你所有的項目需求。

如果沒有別的，你可以看看源代碼，並獲得一些線索來幫助你做什麼。該插件很小，評論很好。

來源

2013-07-02 18:38:29

檢測寬度並使用響應式圖像

回答

相關問題