我想完成一项简单的任务。
我在可变宽度容器中有一个图像。
容器的宽度可以是 300、400、700 或 900 像素。这是通过媒体查询完成的。图像应该占据该容器的所有宽度。所以它也将是 300、400、700 或 900 像素宽。对于所有宽度值,图像应该有不同的来源。所以我可以在手机上提供较小的图像。
我认为这可以通过元素的srcset
属性来完成,也许是在属性的帮助下。像这样的宽度img
sizes
<img src="http://dummyimage.com/300x200/abc/000"
alt="dummy"
srcset="
http://dummyimage.com/900x200/abc/000 900w,
http://dummyimage.com/700x200/abc/000 700w,
http://dummyimage.com/400x200/abc/000 400w,
http://dummyimage.com/300x200/abc/000 300w
"
/>
但它不是这样工作的,因为浏览器选择图像的比例与显示端口的宽度成比例,而不是与图像本身的宽度成比例。使用来自http://scottjehl.github.io/picturefill/
的图片填充 polyfill 的示例:http : //codepen.io/HerrSerker/pen/itBJy。这不起作用,因为它将采用下一个尺寸的一个图像。
我当然可以考虑到这一点并将我的 srcset 更改为此
srcset="
http://dummyimage.com/900x200/abc/000 999999w,
http://dummyimage.com/700x200/abc/000 900w,
http://dummyimage.com/400x200/abc/000 700w,
http://dummyimage.com/300x200/abc/000 400w
"
这将在桌面上工作,但在视网膜显示器上失败,因为这里考虑了设备像素比,但方式与媒体查询不同。而且它没有用,因为图像应该知道视口的宽度和相同的宽度以及在编译时的宽度?没门。图像 我在网格系统中使用图像。如果我在桌面设备上的 3 列网格和智能手机上的 1 列网格中,图像具有不同的宽度。这不应该由图像负责计算宽度和视口宽度的比率。
sizes
我对这个属性也没有任何运气(这里没有例子)。原因同上。在尺寸属性中,我说根据媒体查询我的图像应该宽多少视口宽度。这太离谱了。图片应该怎么知道?
所以我想出了这个解决方案。我设置了一个data-srcset
与 srcset 属性本身语法相同的属性,但使用了自定义 JavaScript 编程。此处示例:http: //codepen.io/HerrSerker/pen/tCqJI
jQuery(function($){
var reg = /[\s\r\n]*(.*?)[\s\r\n]+([^\s\r\n]+w)[\s\r\n]*(,|$)/g;
var regw = /(.*)w/;
var sets, $set, set, myMatch, i, w, that, last;
var checkData = function() {
$('img[data-srcset]').each(function() {
that = $(this);
$set = that.data('srcset');
sets = [];
while(myMatch = reg.exec($set)) {
set = {};
set.src = myMatch[1];
set.w = (myMatch[2].match(regw))[1];
sets[set.w] = set;
}
w = that.width();
last = 0;
for (i in sets) {
last = i;
if (w <= i) {
that.attr('src', sets[i].src);
return;
}
}
that.attr('src', sets[last].src);
});
};
checkData();
$(window).on('resize', checkData);
});
这行得通,但感觉不对。但也许不是,正如规范所说的那样,响应式图像的行为方式就是它的行为方式。但我觉得这是错误的方式。90% 的响应式图像用例不适用于规范。
那我错了吗?我没有以定义的方式使用 srcset 吗?我对规范的理解有误吗?W3C 和 Responsive Images 社区组是否以这种脱离现实的方式思考?