javascript - 检测宽度并使用响应式图像

Question

我有一个可以自动设置照片宽度的应用程序。 问题是有时它定义的尺寸比原始图像大: 例如:这个“a.jpg”宽500px，显示时定义应用程序600px。

对于某些限制布局，我无法更改它。 我想，当应用程序定义的图像尺寸大于原始尺寸时，它使用另一张照片。

例如:如果应用程序定义宽度为 600 像素，而图像“a.jpg”为 500 像素，则它将使用宽度为 700 像素的“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');
  }
});