Html 在响应性环境中提供响应性图像的最佳实践？ 商定条件

所谓响应图像，我指的是为给定屏幕（视口大小和DPI）选择具有最佳文件大小的源图像的技术

响应上下文指的是RWD：页面组件根据视口宽度更改布局

问题 独立实现这两个目标相当容易。对于响应图像，我们有

和

，对于响应上下文，我们有

最小宽度

和

最大宽度

媒体查询

但是我怎么能同时使用这两个呢

问题示例 假设有一个组件显示三个图像，并对视口宽度做出如下响应：

可以看到，随着视口大小的增长，图像大小不会线性增长。它前后变化

理想情况下，应根据每个图像的CSS尺寸而不是屏幕宽度选择不同的文件大小

示例：

• 对于“平板电脑肖像”视口，第一幅图像应选择比其他两幅更大的源
• “平板电脑景观”视口应加载比“大型手机”视口更小的图像，尽管其宽度更大

由于响应图像是一种HTML技术，而RWD是一种CSS技术，所以我认为没有一种优雅的方法可以让它们协同工作

假设解0 理想情况下，为了实现这一点，

size

HTML属性应该根据每个图像元素的宽度而变化。但RWD无法做到这一点

我可以想象这样的情况：

/*全宽图像和单列网格*/
.响应图像{
尺寸：100vw；
}
/*1+2柱网轴线又名“平板电脑肖像”布局*/
@介质（最小宽度：400px）和（最大宽度：767px）{
.grid.响应图像{
尺寸：50vw；
}
.grid.响应图像：第一个孩子{
尺寸：100vw；
}
}
/*3柱网*/
@介质（最小宽度：768px）{
.grid.响应图像{
尺寸：33vw；
}
}

天哪，这真是太棒了！一个完全响应的网格，完全响应的图像知道自己的上下文，紧凑的CSS

不幸的是，这不起作用。无法从CSS中操纵

大小

此示例仅用于演示所需的结果


潜在解决方案1：JavaScript魔术
一个显而易见的解决方案是使用JavaScript库根据图像元素自身的宽度做出决定（类似于元素查询方法）


赞成的意见：

一旦设置好，它就可以工作了！非常容易添加新图像
这种方法是完全动态的。组件知道自己的宽度并选择正确的文件大小，而不考虑上下文（父组件的大小）


欺骗：

图像将开始加载太晚
我有一个带有服务器端预渲染的单页应用程序。服务器必须为每个图像提供
src
，而不知道视口大小

一方面，这解决了前面的问题

另一方面，这将导致在JS接管时加载两组图像：(



可能的解决方案2:CSS自定义属性aka var（）
我想到了以下想法，我怀疑我是第一个想到它的人

将所有可用的图像源放入CSS自定义属性中
在媒体查询中使用CSS
var（）
选择正确的查询
例如：

可能有关联。我肯定。在div中渲染图像并不一定是坏的，但是，出于可访问性的目的，你仍然可以使用
role=“img”
和
aria标签，但这感觉很老，尽管这是必要的。我会说：保持简单。如果我不得不相信各种博客，浏览器可以处理图像（具有合理的大小…不像怪物那样是6000x4000），而且通常图像不会使网站变慢（它们也可以被缓存）。代码中的大量膨胀和大量脚本似乎可以做到这一点。