bootstrap 5 的响应图像 (srcset) 的断点和宽度？

Question

我很想听听其他人的意见，他们会为使用 Bootsrap CSS 框架的全宽 picture/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>

Answer 1

根据 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

目前，在我从其他人那里听到更好的消息之前，我将使用下图 widths/breakpoints 为 scrset 显示 full-screen： 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>

bootstrap 5 的响应图像 (srcset) 的断点和宽度？

Breaking points and widths for responsive images (srcset) with bootstrap 5?

twitter-bootstrap

srcset

bootstrap-5