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

Posted 2023-03-06

【中文标题】根据img大小而不是屏幕大小使用HTML5或CSS3加载不同的图像[重复]

【英文标题】：Load different images with HTML5 or CSS3 based on img size not screen size [duplicate]

【发布时间】：2017-07-10 01:45:21

【问题描述】：

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

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

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

希望你能理解我的想法。

那么，有没有可能只用 html5 和 CSS3 而没有 JS 来解决这个问题。如果可能，请提供一些例子。

提前致谢:)

【问题讨论】：

也许添加相关代码，包括html和css，告诉我们你使用一些框架吗？不是 100% 清楚你想做什么。

@skobaljic 例如参见 Akxe 答案。根据视口大小加载图像。我想加载基于 img 元素大小的图像。

【参考方案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" >
 <!-- Display fallback image (not it will probably be IE9 so you can include thebig variant) -->
</picture>

它可以检测一种类型是否可显示，例如您的图像是否可以被视为 SVG，或者它可以根据显示大小进行切换。它也有很好的 img 形式的后备，不会被较新的浏览器呈现。

【讨论】：

请参阅 media="(min-width: 600px)" 您的示例。它基于视口加载图像。

在问题标题中清楚地写着based on image size not screen size。

除此之外，您将不得不使用 JS，这是我所知道的最敏感的事情。 SVG 有该选项，但如果您的图像是光栅图像，而不是矢量图像，它也不是您的选择。

srcset 是最好的 HTML5 方式，它会告诉浏览器，什么图像是什么大小，它会根据自己的喜好进行选择。

【参考方案2】：

好吧，您可以尝试 Jquery 来获取每个图像的宽度并根据您想要的条件添加一个类，然后只需附加一个图像或任何您需要的...

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

查看JsFiddle