2016-09-29 57 views
0

我想讓自適應網頁加載適當大小的圖像。我現在有一個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

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

Large image always loaded

回答

0

這就是我想要的,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格式的高效傳輸

0

首先,您使用的每個場景相同的圖像,但只有不同的尺寸?如果是這樣,您可能只需使用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像素。瀏覽器利用來自srcsetsizes的信息來提供最符合所述條件的圖像。

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

相關問題