已知圖像大小時的圖片元素使用情況

我想讓自適應網頁加載適當大小的圖像。我現在有一個HTML模板，看起來像：已知圖像大小時的圖片元素使用情況

<picture> 
    <source media="(min-width: 950px)" srcset="{{ .Cover.Large }}"> 
    <source media="(min-width: 600px)" srcset="{{ .Cover.Medium }}"> 
    <source media="(min-width: 300px)" srcset="{{ .Cover.Small }}"> 
    <source media="(min-width: 150px)" srcset="{{ .Cover.Xsmall }}"> 
<img src="{{ .Cover.Medium }}" alt="{{ .Title }} poster"> 
    </picture>

大= 950x400 中型= 600x252 小= 300x126 Xmall = 150x63

現在，我想這個最小寬度是行不通的非常好，如果圖片連續或彎曲。定義圖像的尺寸並讓瀏覽器下載最合適的源代碼不是最好的嗎？

https://html.spec.whatwg.org/multipage/embedded-content.html#valid-source-size-list

什麼是做到這一點的乾淨的方式？令人困惑的是在我自己的反應的實驗中，大尺寸總是加載：

來源

2016-09-29 hendry

這就是我想要的，4張圖片橫跨要備份與在JPG多引渡屏幕彎曲爲了節省客戶端帶寬。請注意代碼缺少src =屬性以使其有效。

body { 
 
    display: flex; 
 
    align-items: flex-start; 
 
} 
 
picture { 
 
    margin: 1em; 
 
}

<picture> 
 
<img 
 
srcset="https://placeholdit.imgix.net/~text?txtsize=89&txt=XSmall&w=150&h=63 150w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Small&w=300&h=126 300w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Medium&w=600&h=252 600w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Large&w=950&h=400 950w" sizes="calc(25vw - 2em)"> 
 
</picture> 
 
<picture> 
 
<img 
 
srcset="https://placeholdit.imgix.net/~text?txtsize=89&txt=XSmall&w=150&h=63 150w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Small&w=300&h=126 300w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Medium&w=600&h=252 600w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Large&w=950&h=400 950w" sizes="calc(25vw - 2em)"> 
 
</picture> 
 
<picture> 
 
<img 
 
srcset="https://placeholdit.imgix.net/~text?txtsize=89&txt=XSmall&w=150&h=63 150w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Small&w=300&h=126 300w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Medium&w=600&h=252 600w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Large&w=950&h=400 950w" sizes="calc(25vw - 2em)"> 
 
</picture> 
 
<picture> 
 
<img 
 
srcset="https://placeholdit.imgix.net/~text?txtsize=89&txt=XSmall&w=150&h=63 150w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Small&w=300&h=126 300w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Medium&w=600&h=252 600w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Large&w=950&h=400 950w" sizes="calc(25vw - 2em)"> 
 
</picture>

所以我學會了幾件事情：

How to flex images
picture.img是好的，你不需要使用source element
瞭解到約vw查看端口大小的寬度，這與屏幕的百分比相似，但您在計算邊距時必須使用絕對值。 calc(25vw - 2em)。 25vw = 1/4的屏幕與圖片邊距1em + 1em任何一方
這東西真的很複雜，這個例子甚至不use break points，我建議你避免你的理智！

它確實是我想要它做的。它加載適當大小和帶寬效率的圖像。如果調整大小，它不會加載我想要的較小圖像。當它擴大時，它確實會獲取更大的更高分辨率的圖像，我想要避免任何醜陋的人爲因素。

結果：幾個JPG格式的高效傳輸

來源

2016-10-07 05:16:26 hendry

首先，您使用的每個場景相同的圖像，但只有不同的尺寸？如果是這樣，您可能只需使用srcset屬性而不是<picture>元素。

<picture>元素用於您需要基於藝術方向的選擇時，例如，如果您在寬屏幕和寬屏幕上使用廣角拍攝。關於<picture>元素的一點是，它用於我們希望在特定斷點處顯示特定圖像的情況，因此在使用<picture>元素時，在圖像選擇方面不存在歧義。

回到我原來的問題，你是使用相同的圖像爲每個屏幕寬度，但只是在不同的大小？如果是這樣，一個具有srcset屬性的正常img元素將爲您提供更好的服務。

對於流體寬度圖像，srcset將與w描述符和sizes屬性一起使用。在sizes屬性中有兩個值。首先是媒體條件。第二個是源大小值，它決定給定特定媒體條件的圖像寬度。下面是srcset語法的例子：

<img srcset="uswnt-480.jpg 480w, 
      uswnt-640.jpg 640w, 
      uswnt-960.jpg 960w, 
      uswnt-1280.jpg 1280w" 
    sizes="(max-width: 400px) 100vw, 
      (max-width: 960px) 75vw, 
      640px" 
    src="uswnt-640.jpg" alt="USWNT World Cup victory">

在這裏，我說的是瀏覽器，對於視口寬度至400個像素，使視口寬度的圖像100％。在視口寬度高達960像素的情況下，使圖像佔視口寬度的75％。對於960像素以上的所有圖像，將圖像製作爲640像素。瀏覽器利用來自srcset和sizes的信息來提供最符合所述條件的圖像。

全面披露：我舉了很多這從文章中，我以前寫的關於這一主題

來源

2016-09-29 18:19:56 huijing

已知圖像大小時的圖片元素使用情況

回答

相關問題