我無法驗證我的影像元素，也無法找到原因。尺寸元素按預期作業，Chrome 加載正確的影像。
W3C-Validator 宣告如下：
元素 img 上的屬性大小的錯誤值 (max-width:768px)100vw, (min-width:768px)45vw：錯誤的 CSS 數字標記：應為減號或數字但看到（而不是（最大寬度：768px） 100vw，
這是我目前的標記。
<figure class="img" data-imageid="1">
<img alt="alt" height="4329" sizes="(max-width:768px)100vw, (min-width: 768px)45vw" src="/7-mgl2164-1.avif" srcset="/7-mgl2164-1.avif 6494w,/7-mgl2164-1-3840px-2560px.avif 3840w,/7-mgl2164-1-1920px-1280px.avif 1920w,/7-mgl2164-1-960px-640px.avif 960w,/7-mgl2164-1-720px-480px.avif 720w,/7-mgl2164-1-600px-400px.avif 600w,/7-mgl2164-1-480px-320px.avif 480w,/7-mgl2164-1-240px-160px.avif 240w,/7-mgl2164-1-120px-80px.avif 120w" width="6494">
<figcaption>
<span>This is an image</span>
<small>@Copyright</small>
</figcaption>
</figure>
想法？
uj5u.com熱心網友回復：
我認為您需要在媒體查詢和大小之間添加一個空格：更改(max-width:768px)100vw為(max-width:768px) 100vw.
來自 MDN：
sizes定義一組媒體條件（例如螢屏寬度）并指示當某些媒體條件為真時最好選擇的影像尺寸——這些是我們之前討論過的提示。在這種情況下，在每個逗號之前我們寫：
- 媒體條件 (
(max-width:600px)) — 您將在 CSS 主題中了解有關這些的更多資訊，但現在我們只說媒體條件描述螢屏可能處于的狀態。在這種情況下，我們說“當視口寬度為 600 像素或更小”。- 空間
- 當媒體條件為真時影像將填充的槽的寬度（480px）
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#resolution_switching_different_sizes
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/312682.html
上一篇：怎樣才能使游戲物件消失？