检测宽度并使用响应图像

Detect the width and use a responsive image

本文关键字：响应 图像 检测      更新时间：2023-09-26

我有一个应用程序可以自动设置照片的宽度。问题是，有时它会定义比原始图像更大的大小：例如：这个".jpg"是500像素宽，600像素用于定义显示时的应用程序。

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

例如：如果应用程序定义宽度为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>

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

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

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

jQuery插件是一个选项吗？我认为Responsive Img做了你想做的事情，但它可能无法满足你的所有项目要求。

如果没有别的，你可以查看源代码并获得一些线索来帮助你做什么。这个插件很小，评论也很好。

相关文章：