Html <；图片>&书信电报；来源>；相对于<；图片>；

我试图把一个响应的网站上的形象。我有以下代码

<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中

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

另外，我更喜欢没有javascript的解决方案

---

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

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

<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'));
        }
    };

window.onload=函数（）{
var images=document.getElementsByClassName（'image-responsive'）；
对于（var i=0；i

现在我用srcset和一些javascript制作了一个图像

这将使用父对象的宽度替换attibute的大小。其中默认大小为400px

---

这将使用javascript：（.

您需要javascript来实现这一点，因为我假设您也是为了性能而这样做的，CSS解决方案将加载所有图像，然后只显示与屏幕对应的图像。图片元素的宽度是多少？视口和图片之间是否有一个大概的比率，或者这是完全动态的？该比率将为Ynamic。我真的不明白你的意思。你能详细说明一下吗？你说你想让你的图像相对于图片元素而不是视口，但你没有说你如何设置图片元素的大小。它是相对于视口还是包含元素？图片元素的大小将由c决定包含divOK，那么什么决定了包含div的大小？您可以发布更多的代码吗？包含div的大小将是随机的。它可以直接在.container中，也可以在.col-sm-6中