與屏幕寬度相關的圖像渲染大小未知時的響應圖像

Question

我有一個 CMS (TYPO3)，它當前輸出普通的<img>標簽。 為了使其具有響應性，我想添加具有不同大小版本的圖像的srcset屬性。

這導致了我們的問題：通過sizes屬性，我可以告訴瀏覽器在選擇圖像版本時要假設的渲染大小。 我可以絕對（以px 、 em等為單位）或視口寬度的百分比（以vw ）給出渲染大小。 但是我不能告訴瀏覽器假設圖像將具有其父級的寬度（以% ）。

如果我事先知道父寬度，我可以將它添加到sizes屬性，如果父尺寸因響應式布局（如 Bootstrap 列）而發生變化，則需要使用某些媒體條件。

唉，我正在擴展一個 CMS 並且無法控制布局或內容，例如：

• 頁面容器寬度
• 列數
• 設計斷點
• 列填充和裝訂線寬度
• 列內的任何列嵌套
• 任何其他填充

收集所有這些信息——只是為了找出圖像父級有多大——幾乎是不可能的。

即使我不知道服務器端的最終圖像渲染寬度（=父寬度）（既不是px也不是vw ），關於如何獲得可提供理想尺寸的響應式圖像的任何想法？

雖然我更喜歡靜態解決方案，但我也願意接受基於 JavaScript 的想法，因為它們可以優雅地回退。

編輯：我的問題歸結為：是否有一些機制可以替換標准中沒有的sizes="100%" ， “以避免混淆它相對於什么” ？

編輯：我目前的解決方案是基於 JS 的：

// this, plus some code to prevent image loading before this is executed
$('img[srcset]').each(function() {
  $(this).attr('sizes', $(this).parent().width() + 'px');
})

我想不必依賴 JS 來做到這一點。

Answer 1

兩種選擇：

使用 srcset

您的用例正是srcset設計目的。 <source>圖像大小是提前知道的； 容器大小在運行時已知； 您可以像 CSS @media查詢一樣定義像素范圍，以告訴瀏覽器將哪個<source>用於給定的容器大小。

媒體查詢相對於視口，而不是容器（與 CSS 媒體查詢一樣），因此您必須進行一些數學運算來決定要使用哪個圖像用於容器相對於該視口的預期大小。 （我相信這種復雜性的原因是你也可以根據屏幕密度設置圖像，但不要引用我的話。）

這個想法是在外部設置圖像的大小，相對於容器，然后使用 srcset 選擇適合該容器的預期大小的圖像給定視口大小。

（StackOverflow 的代碼片段使這很難看，因為它在固定大小的框架內繪制樣本；你能看到的最多的是當你調整 div 大小時圖像源沒有改變，這可能不是有史以來最引人注目的演示。到嘗試調整視口大小，您需要將代碼復制到新窗口中）。

 .container { border: 1px solid; width: 50%; height: 150px; resize: horizontal; overflow:auto; }

 <div class="container" resizable> <picture> <source media="(max-width: 100px)" srcset="http://via.placeholder.com/100x150"> <source media="(max-width: 200px)" srcset="http://via.placeholder.com/200x150"> <source media="(max-width: 300px)" srcset="http://via.placeholder.com/300x150"> <source media="(max-width: 400px)" srcset="http://via.placeholder.com/400x150"> <source media="(max-width: 500px)" srcset="http://via.placeholder.com/500x150"> <source media="(max-width: 600px)" srcset="http://via.placeholder.com/600x150"> <source media="(max-width: 700px)" srcset="http://via.placeholder.com/700x150"> <source media="(max-width: 800px)" srcset="http://via.placeholder.com/800x150"> <img src="http://via.placeholder.com/10x10" width="100%"> </picture> </div>

瀏覽器支持目前不完整（IE 和 Edge 通常是罪魁禍首）但存在polyfill 。

使用背景圖片

...可以使用媒體查詢進行更改。

@media screen and (min-width: 501px) {
  .container {
    background-image: url('big.jpg');
  }
}
@media screen and (max-width: 500px) {
  .container {
    background-image: url('small.jpg');
  }
}

這是普遍支持的，但要求您的 CMS 能夠與 HTML 一起生成 CSS 規則。