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制作了一个图像。

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

这使用javascript :(。

Answer 2

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

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

2 个答案: