使用 srcset 和容器流体

Question

我正在尝试与 srcset 结合来自 Bootstrap.

的容器流体

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

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

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

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

        <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

使用 srcset 和容器流体

Working with srcset and container-fluid

javascript

css

responsive-images