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

回答

相關問題