html - 根据 img 大小而不是屏幕大小使用 HTML 或 CSS 加载不同的图像

<分区>

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

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

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

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

最佳答案

有一个专门用于这种情况的特殊元素。参见 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 形式的很好的后备，较新的浏览器不会呈现。

关于html - 根据 img 大小而不是屏幕大小使用 HTML 或 CSS 加载不同的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42350336/

上一篇：javascript - 导航栏轮播元素背景颜色

下一篇：javascript - 桌面谷歌 chrome 浏览器禁用放大？

相关文章：

css - 媒体查询可以根据 div 元素而不是屏幕调整大小吗？

javascript - 根据 JavaScript 函数的值在 HTML 中编写一些内容

javascript - 如何检查浏览器是否支持HTML5？

HTML5 - 在页面中央放置一个宽横幅设计，具有不同的渐变颜色

javascript - jQuery:以最佳方式根据 URL 添加类

css - 为水平列表中的单个列表项添加边距

javascript - 如何用Javascript解决整个可点击的div？

javascript - jQuery 测验元素 : Append Image After a Text Field to Denote Right or Wrong