gpt4 book ai didi

css - 为什么响应式图像如此脱离(我的)现实?

转载 作者:行者123 更新时间:2023-11-28 17:30:42 30 4
gpt4 key购买 nike

我想完成一项简单的任务。
我在可变宽度容器中有一个图像。
容器的宽度可以为 300、400、700 或 900 像素。这是通过媒体查询完成的图像应占据该容器的所有宽度。所以它也将是 300、400、700 或 900 像素宽。对于所有宽度值,图像应该有不同的来源。所以我可以在手机上提供较小的图像。

我认为这可以通过 img 元素的 srcset 属性来完成,也许在 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/ 的 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
"

这将在桌面上运行,但在 Retina 显示器上失败,因为此处考虑了设备像素比,但与媒体查询的方式不同。而且它没有用,因为图像应该知道视口(viewport)的宽度并且与编译时的宽度相同?决不。图像 我在网格系统中使用图像。如果我在桌面设备上的 3 列网格和智能手机上的 1 列网格中,图像具有不同的宽度。图像不应该负责计算宽度和视口(viewport)宽度的比率。

我对 sizes 属性也没有任何好感(这里没有例子)。原因同上。在 sizes attibute 中,我说根据媒体查询,我的图像应该宽多少视口(viewport)宽度。这太离谱了。图像应该怎么知道?

所以我想到了这个解决方案。我设置了一个 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 Community Group 是否以这种脱离现实的方式思考?

最佳答案

小图是大图的缩小版吗?或者他们被裁剪(艺术指导)?如果是后者,你应该使用图片source media

浏览器只使用视口(viewport)来决定下载哪个图像的原因是,当浏览器想要下载图像时,它是唯一可用的。 CSS(可能)尚未下载。所以如果你使用srcset+sizes,你必须在sizes中重复断点和图像宽度。

关于css - 为什么响应式图像如此脱离(我的)现实?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26156301/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com