image - 响应图像或不同的图片

Question

<分区>

Answer 1

除了小图片，我会针对不同的分辨率使用不同的图片。但不在 CSS 中使用媒体查询 - 有一个 draft of a standard在 HTML 中执行此操作。

这东西还没有完全实现，但最近有一些进展(尤其是在 Chrome 中)。但是，有一个 JavaScript polyfill为此 - 我对此有很好的体验。

示例:它可能看起来像这样:

<picture>
    <source media="(min-width: 1440px)" srcset="2000px.jpg 1x, 4000px.jpg 2x">
    <source media="(min-width: 500x)" srcset="1440px.jpg 1x">
    <source media="all" srcset="480px.jpg 1x">
    <img src="fallback.jpg" alt="alternative text">
</picture>

标签按顺序处理，使用第一个匹配媒体查询的标签。所以这将:

1. 在宽度至少为 1440 像素且设备像素比小于 2 倍的视口(viewport)上渲染图像 2000px.jpg
2. 在宽度至少为 1440 像素且设备像素比至少为 2 倍的视口(viewport)上渲染图像 4000px.jpg
3. 在宽度介于 480 像素和 1439 像素之间的视口(viewport)上渲染 1440px.jpg(设备像素比无关紧要)
4. 在所有其他情况下呈现 480px.jpg，除了:
5. 如果浏览器不支持图片标签，渲染图片fallback.jpg。

使用 标签并不是唯一的方法，还有更多的可能性。请参阅上面链接的标准草案。