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

Question

我有一个自动设置照片宽度的应用程序。问题是有时它定义了比原始图像更大的尺寸： 例如：这个“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>

有办法做到这一点吗？谢谢

Answer 1

可以选择 jQuery 插件吗？我认为Responsive Img可以满足您的要求，但它可能无法满足您的所有项目要求。

如果不出意外，您可以查看源代码并获得一些线索来帮助您完成工作。该插件很小，评论很好。

Answer 2

是的，通过使用 jquery 你可以这样做

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