回應式圖片，scrset為螢屏寬度的25%，選擇大圖-有解無憂

所以我有一個使用 scrset 的回應式影像的代碼：

<picture class="background-image">
   <source type="image/jpg" 
      srcset="http://localhost:61186/public/images/asia_1637411941_1920x1280.jpg 1920w,
              http://localhost:61186/public/images/asia_1637411941_1720x1147.jpg 1720w,
              http://localhost:61186/public/images/asia_1637411941_1520x1013.jpg 1520w,
              http://localhost:61186/public/images/asia_1637411941_1320x880.jpg 1320w,
              http://localhost:61186/public/images/asia_1637411941_1120x747.jpg 1120w,
              http://localhost:61186/public/images/asia_1637411941_920x613.jpg 920w,
              http://localhost:61186/public/images/asia_1637411941_720x480.jpg 720w,
              http://localhost:61186/public/images/asia_1637411941_520x347.jpg 520w,
              http://localhost:61186/public/images/asia_1637411941_320x213.jpg 320w">
    <img src="http://localhost:61186/asia_1637411941_1920x1280.jpg" alt="Asia" />
</picture>

這（帶有周圍的 html）在 360 像素寬度的螢屏上呈現為：

回應式圖片，scrset 為螢屏寬度的 25%，選擇大圖

現在，影像元素大約是100px寬度。但是 Chrome 加載了1120px版本（沒有快取/隱身標簽）

回應式圖片，scrset 為螢屏寬度的 25%，選擇大圖

現在理想情況下它會加載320px寬度影像，因為元素只是100px寬度。但如果情況并非如此，那么基于360px我的視口，我最多希望它選擇520px影像的版本。但事實并非如此。

現在在 Chrome Lighthouse 中，我得到了分數處罰，因為我需要“ properly size the images”。但我覺得我正在這樣做。有人有解決方案嗎？

uj5u.com熱心網友回復：

如果你通過 W3 驗證器運行你的標記，你會得到

Error: When the srcset attribute has any image candidate string with a width descriptor, the sizes attribute must also be present.

我不知道您正在尋找的布局以及要使用的媒體查詢，但看看以下快速修復是否適合您：

<picture class="background-image">
   <source type="image/jpg" 
      srcset="http://localhost:61186/public/images/asia_1637411941_1920x1280.jpg 1920w,
              http://localhost:61186/public/images/asia_1637411941_1720x1147.jpg 1720w,
              http://localhost:61186/public/images/asia_1637411941_1520x1013.jpg 1520w,
              http://localhost:61186/public/images/asia_1637411941_1320x880.jpg 1320w,
              http://localhost:61186/public/images/asia_1637411941_1120x747.jpg 1120w,
              http://localhost:61186/public/images/asia_1637411941_920x613.jpg 920w,
              http://localhost:61186/public/images/asia_1637411941_720x480.jpg 720w,
              http://localhost:61186/public/images/asia_1637411941_520x347.jpg 520w,
              http://localhost:61186/public/images/asia_1637411941_320x213.jpg 320w">
     sizes="100vw">

    <img src="http://localhost:61186/asia_1637411941_1920x1280.jpg" alt="Asia" />
</picture>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/361303.html

標籤：html css 响应式设计灯塔

上一篇：如何在HTML和CSS中制作一個簡單的評分系統？

下一篇：如何使用CSS對齊文本和圖表