檢測寬度並使用響應圖像

Question

我有一個應用程序，可以自動設置照片的寬度。 問題是，有時它定義的尺寸大於原始圖像：例如：這個“a.jpg”寬500像素，600像素，用於在顯示時定義應用程序。

對於某些限制布局，我無法更改它。 我想，當應用程序定義的圖像大小大於原始大小時，它會使用另一張照片。

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>

有辦法做到這一點？ 謝謝

Answer 1

是的，使用jquery你可以這樣做

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

Answer 2

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

如果不出意外，您可以查看源代碼並獲得一些線索來幫助您正在做的事情。 該插件很小，評論很好。