我很想知道其他人會選擇什么寬度大小來使用 Bootsrap CSS 框架替換全寬圖片/srcset 影像。你遵循 Bootstrap 的斷點嗎？例如，<576px 為 576w，≥576px 為 768w，≥768px 為 992w，≥992px 為 1200w，≥1200px 為 1400w，≥1400px 為 2048w。在此示例中，影像的寬度是其斷點的最大寬度。（從技術上講，最大寬度將是 -1px 它的斷點。為簡單起見，我選擇了與下一個斷點相同）
如：
<picture>
<source type="image/avif" sizes=”100vw” srcset="/img/lion-sm.avif 576w, /img/lion-md.avif 768w, /img/lion-lg.avif 992w, /img/lion-xlg.avif 1200w" />
<source type="image/webp" sizes=”100vw” srcset="/img/lion-sm.webp 576w, /img/lion-md.webp 768w, /img/lion-lg.webp 992w, /img/lion-xlg.webp 1200w" />
<img sizes="100vw" src="/img/lion.jpeg" srcset="/img/lion-sm.jpeg 576w, /img/lion-md.jpeg 768w, /img/lion-lg.jpeg 992w, /img/lion-xlg.jpeg 1200w" alt="lion">
</picture>
uj5u.com熱心網友回復：
根據 browserstack.com 上列出的最常見解析度，我確定了縱向和橫向寬度最接近的 Bootstrap 等效值。
1920×1080 (8.89%) Bootstrap: 2048w, 1400w (could use 1200w)
1536×864 (3.88%) Bootstrap: 2048w, 992w
1366×768 (8.44%) Bootstrap: 1400w, 992w
414×896 (4.58%) Bootstrap: 576w, 992w
375×667 (3.75%) Bootstrap: 576w, 768w
360×640 (7.28%) Bootstrap: 576w, 768w
目前，在我從其他人那里聽到更好的訊息之前，我將為 scrset 使用以下影像寬度/斷點以進行全屏顯示：576w、992w、1400w 和 2048w。
例如，
<picture>
<source type="image/jpeg" media="(max-width: 575px)" srcset="assets/img/faith-in-action/faith-in-action-cropped-sm.jpg">
<source type="image/jpeg" media="(min-width: 576px)"
srcset="assets/img/faith-in-action/faith-in-action-md.jpg 992w,assets/img/faith-in-action/faith-in-action-xl.jpg 1400w, assets/img/faith-in-action/faith-in-action-xxl.jpg 2048w">
<img src="assets/img/faith-in-action/faith-in-action-cropped-sm.jpg" alt="drummers">
</picture>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/484784.html
上一篇：Bootstrap——相互替換的“sticky-top”元素
下一篇：Bootstrap5自動調整列寬