响应式图像到Bootstrap (4) 列和srcsetsizes属性。

Question

直到现在，我有一个大图像，并添加了 "img-fluid "类。有了这个类，我可以根据容器的大小来增加或减少图像的大小。问题是，比如说，一个CSS分辨率为360px的移动设备显示的是800px的图像。

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

我有一个真实的例子，就是我正在制作的一个网页。接下来，我向大家展示了基于图像显示的分辨率的图像大小。

-------------------------------
|    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)

现在会发生什么？我读了好几个教程，也读了官方文档，一定是我太笨了，因为我无法生成一个具有以下属性的图像标签。ssset 和 尺寸. 我不懂教程或官方文档，所以我请求你帮助我用我在例子中放的措施来建立图像标签，这样我就可以理解它，从而能够用我正在做的网站上的所有图像来做。

非常感谢你的帮助！请你帮助我。

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>