javascript - 使用 srcset 和容器流体

Question

我正在尝试将 srcset 与来自 Bootstrap 的 container-fluid 结合使用。

我知道，有问题，但我不知道是什么!我正在尝试使用 calc，因为我没有图像宽度的确切数字。

在@media (max-width : 991.98px) 媒体查询中，所有图像都具有相同的宽度。在此之上，我在顶部有一个大图像，在其下方有两个较小的图像。

此外，我正在使用 lazysizes 来帮助我计算大小。我真的需要使用它吗？

如果有人能帮助我，我将不胜感激。

https://codepen.io/Sasanmore/pen/zJrEpB

        <figure class="p-2 largefig col-xl-12 col-lg-12">
        <img data-sizes="auto" 
                 alt="test"
                 data-src="https://via.placeholder.com/2880x1920"
                 data-srcset="https://via.placeholder.com/600x400 600w,
                              https://via.placeholder.com/1200x800 1200w,
                              https://via.placeholder.com/1800x1200 1800w,
                              https://via.placeholder.com/2880x1920 2880w"
                 sizes="(min-width: 1200px) 100vw"
                 class="img-fluid lazyload">
        </figure>

        <figure class="p-2 col-lg-6 smallfig col-xl-6">
            <img data-sizes="auto" 
                 alt="test"
                 data-src="https://via.placeholder.com/2880x1920"
                 data-srcset="https://via.placeholder.com/600x400 600w,
                              https://via.placeholder.com/1200x800 1200w,
                              https://via.placeholder.com/1800x1200 1800w,
                              https://via.placeholder.com/2880x1920 2880w"
                 sizes="(min-width: 1200px) calc(0.5 * (50vw - 1em)),
                        (max-width: 991.98px) calc(1 * (100vw - 1em)), 100vw"
                 class="img-fluid lazyload">
        </figure>

Answer 1

所以我在这里找到了这篇很棒的文章并帮助了我! https://developers.google.com/web/fundamentals/design-and-ux/responsive/images

还有这个: https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433