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

我想在网站上放置一个响应式图像。我有以下代码<picture><source>相对于宽度<picture>

<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的解决方案。

编辑：我缺少的是一种方法来选择一个基于他自己的宽度。我猜这不符合HTML5标准？

来源

2016-08-05 Jesper Holster

需要Javascript这一点，因为我认为你也正在做这个演出和CSS的解决方案将加载所有图像，然后只显示与你的屏幕之一。 – Relisora

是什么图片元素的宽度？视口和图片之间是否有球场比率，或者这是完全动态的吗？ –

这个比例将是全部动态的。 –

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

来源

2016-08-05 14:53:26

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

来源

2016-08-05 12:24:45 RussAwesome

我不真的明白你的意思。你能详细说明吗？ –

你说你希望图像相对于图片元素而不是视口，但是您没有说过如何设置图片元素的大小。它是相对于视口还是相对于包含元素？ – RussAwesome

图片元素的大小将由容器div –

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

回答

相关问题