<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

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

PS。我更喜欢没有 javascript.

的解决方案

编辑：我缺少的是一种根据他自己的宽度获得 select a 的方法。我想这不符合 hte HTML5 标准？

Answer 1

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

Answer 2

<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 :(.

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

<picture> <source> relative to width of <picture>

html

css

image

twitter-bootstrap

responsive