根据img大小而不是屏幕大小，使用HTML5或CSS3加载不同的图像

我想根据

img

元素大小而不是屏幕/视口大小在网页上加载图像

例如，我有两幅图像，像分辨率为100px的

res-100px.png

和分辨率为200px的

res-200px.png

如果img宽度小于或等于100px，则加载

res-100px.png

image。如果

img

宽度大于

100px

load

res-200px.png

image

我希望你能理解我的想法

那么，仅仅使用HTML5和CSS3而不使用JS是否有可能解决这个问题呢。如果可能，请提供一些例子

---

提前感谢：）

此案例有一个特殊元素。看

​

---

它可以检测类型是否可显示，例如，图像是否可以被视为SVG，或者它可以根据显示大小进行切换。它还有很好的img形式的回退功能，这是新浏览器无法呈现的。

您可以尝试Jquery获取每个图像的宽度，并根据需要的条件添加一个类，然后只需在图像或所需的任何内容中附加一个

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

---

检查此项

可能会添加相关代码，包括html和css，告诉我们您是否使用了一些框架？您想做什么还不是100%清楚。@skobaljic例如，请参见Akxe答案。根据视口大小加载图像的。我想加载基于图像的

img

元素大小。请参阅示例中的

media=“（最小宽度：600px）”

。它基于视口加载图像。在问题标题中，它清楚地表示基于图像大小而非屏幕大小的

。除此之外，您还必须使用JS，这是我所知道的最具响应性的事情。SVG有这个选项，但如果您的图像是光栅图像，而不是矢量图像，那么它也不会是您的选项。srcset是HTML5实现它的最佳方式，它会告诉浏览器，什么图像是什么大小，并且会根据其首选项进行选择。
 $('img').addClass(function() {
    if ( this.height > 200 ) {
       return 'show-res-200px';
    } else {
       return 'show-res-100px';
    }
});