html - 相对于 的宽度

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

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

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

编辑:我缺少的是一种根据他自己的宽度选择 a 的方法。我猜这不在 hte 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 制作了一个图像。

这会用其父元素的宽度替换尺寸属性。默认大小 = 400 像素。

这使用了 javascript :(。