Question

我想根据img元素大小而不是屏幕/视口大小在网页上加载图片。

例如，我有两个图像，如res-100px.png，分辨率为100px，res-200px.png分辨率为200px。

如果img宽度小于或等于100px加载res-100px.png图像。如果img宽度大于100px加载res-200px.png图片。

我希望你能理解我的想法。

那么，如果没有JS，只用HTML5和CSS3就可以解决这个问题。如果可能的话请提供一些例子。

提前致谢：）

Answer 1

这种情况只有一个特殊元素。见picture

<picture>
 <source srcset="mdn-logo.svg" type="image/svg+xml">
 <!-- Load SVG preferrably -->

 <source srcset="large.jpg  1024w,
     medium.jpg 640w,
     small.jpg  320w" sizes="33.3vw">
 <!-- Load image for size(s) -->


 <source srcset="logo-big.png" media="(min-width: 600px)">
 <source srcset="logo-small.png" media="(max-width: 600px)">
 <!-- Load image for size(s) -->

 <img src="mdn-logo.jpg" alt="MDN">
 <!-- Display fallback image (not it will probably be IE9 so you can include thebig variant) -->
</picture>

它可以检测类型是否可显示，例如，如果您的图像可以被视为SVG，或者它可以根据显示大小进行切换。它还具有img形式的良好回退，而不是由较新的浏览器呈现。

Answer 2

你可以试试Jquery来获取每个图像的宽度，并根据你想要的标准添加一个类，然后只需附加你需要的图像或观察者......

 $('img').addClass(function() {
    if ( this.height > 200 ) {
       return 'show-res-200px';
    } else {
       return 'show-res-100px';
    }
});

选中此JsFiddle

使用HTML5或CSS3加载基于img大小而不是屏幕大小的不同图像

2 个答案: