将响应图像放入 Bootstrap (4) 列和 srcset/sizes 属性

Question

到目前为止，我有一个大图像并添加了“img-fluid”类。有了这个，我可以根据容器使图像增大或减小其大小。例如，问题在于 CSS 分辨率为 360 像素的移动设备正在显示 800 像素的图像。

出于这个原因，我想制作不同大小的图像，以便每个设备显示的图像与该设备上容器的大小更加一致。

我有一个我正在制作的网页的真实示例。接下来，我根据显示图像的分辨率向您展示图像的大小：

-------------------------------
|    Screen    |   Rendered   |
|  Resolution  |  Image Width |
-------------------------------
| Above 1500px |     680px    |
|    1500px    |     672px    |
|    1200px    |     535px    |
|     992px    |     440px    |
|     991px    |     796px    |
|     768px    |     610px    |
|     576px    |     544px    |
|     414px    |     382px    |
|  below 414px |   < 382px    |
-------------------------------

<div class="container">
    <div class="row mb-4 pb-2 pb-md-4 pb-lg-2">
        <div class="col-12 col-md-10 col-lg-11 mx-auto">
            <div class="row no-gutters">
                <div class="col-12 col-lg-6">
                    <img src="example-image-1-800px.jpg" class="img-fluid" alt="">
                </div>
                <div class="col-6 d-none d-lg-block">
                    <img src="example-image-2-800px.jpg" class="img-fluid" alt="">
                </div>
            </div>
        </div>
    </div>
</div>
// Bootstrap Breakpoints: 576px, 768px, 992px, 1200px and 1500px

根据这个实际测试，我得出结论，我的图像将达到的最大宽度为 796px！现在我根据之前的宽度生成图像：

example-image-800px.jpg
example-image-800px-2x.jpg (1600px width)
example-image-650px.jpg
example-image-650px-2x.jpg (1300px width)
example-image-500px.jpg
example-image-500px-2x.jpg (1000px width)
example-image-350px.jpg
example-image-350px-2x.jpg (700px width)

现在会发生什么？看了好几篇教程，看了官方文档，肯定是我笨，因为我无法生成带有srcset和sizes属性的图片标签强>。我看不懂教程或官方文档，所以请您帮助我使用我在示例中放置的措施来构建图像标签，以便我能够理解它，从而能够对所有图像进行操作我正在做的网站。

提前非常感谢您！ 请帮忙！

Answer 1

你试试图片html标签吗？

<picture>
    <source srcset="smaller.jpg" media="(max-width: 768px)">
    <source srcset="default.jpg">
    <img srcset="default.jpg" alt="My default image">
</picture>