<picture> <source> 相对于 <picture> 的宽度

Question

我正在尝试在网站上放置响应式图片。我有以下代码

<picture>
<source media="(max-width: 400px)" srcset="cache/images/image.w400.jpg"></source>
<source media="(max-width: 800px)" srcset="cache/images/image.w800.jpg"></source>
<source media="(max-width: 1000px)" srcset="cache/images/image.w1000.jpg"></source>
<source media="(max-width: 1200px)" srcset="cache/images/image.w1200.jpg"></source>
<source media="(max-width: 1920px)" srcset="cache/images/image.w1920.jpg"></source>
<img src="/imgresizer/images/image.jpg">
</picture>

图片元素的大小将由包含的div决定。

包含的 div 的大小将是随机的。可以直接在.container中，也可以在.col-sm-6中

这里的问题是相对于视口的最大宽度。 我希望根据图片元素的宽度选择源。这可能吗？如果有，怎么做？

PS。我更喜欢没有 javascript 的解决方案。

编辑：我缺少的是一种根据他自己的宽度选择 a 的方法。我猜这不在 HTML5 标准中？

Answer 1

<img class="image-responsive" data-srcset="cache/images/image.w400.jpg 400w, cache/images/image.w800.jpg 800w, cache/images/image.w1000.jpg 1000w, cache/images/image.w1200.jpg 1200w, cache/images/image.w1920.jpg 1920w" data-src="images/image.jpg" sizes="720px" src="images/image.jpg">

window.onload = function() {
        var images = document.getElementsByClassName('image-responsive');
        for(var i = 0; i < images.length; i++) {
            var width = images[i].parentElement.offsetWidth;
            images[i].setAttribute('sizes', width+'px');
            images[i].setAttribute('src', images[i].getAttribute('data-src'));
            images[i].setAttribute('srcset', images[i].getAttribute('data-srcset'));
        }
    };

现在我用 srcset 和一点 javascript 制作了一张图片。

这会将大小属性替换为其父级的宽度。默认尺寸 = 400px。

这使用 javascript :(。

Answer 2

您可以将最大宽度查询更改为使用百分比吗？这样，当您的图片元素调整大小时，它将根据图片的相同百分比宽度选择不同的来源。