Nuxt Img 模块和 Bootstrap 网格列的尺寸是多少？

Question

如果你使用Bootstrap的网格系统来布局你的页面，还有six breakpoints：

我是否尝试配置 nuxt-img 大小以匹配每个断点的列大小？就我而言，我只是使用md 列来保持简单，如下所示：

<div class="container">
    <div class="row>
        <div class="col-md-8>
            <nuxt-img
            provider="cloudinary"
            :src="post.publicId"
            width="2450"
            height="3600"
            class="img-fluid card-img-top"    // <----- 'img-fluid' tells image to take width of its container
            sizes="XXXX" //<--- I am not sure what sizes to put here???
              />
        </div>
        <div class="col-md-4">
            ....etc....
        </div>
    </div>
</div>

有人可以就如何为 Bootstrap 网格列定制 Nuxt-img 组件提供一些指导吗？谢谢！

更新：这是一个沙盒测试：https://codesandbox.io/s/billowing-butterfly-gi8j6?file=/layouts/default.vue

我有如下设置：

              <nuxt-img
                provider="cloudinary"
                src="117_acy7d3"
                width="431"
                height="600"
                class="figure-img img-fluid card-img-top shadow"
                sizes="sm:576px md:768px lg:992px xl:1200px xxl:1400px"
              />

查看网络选项卡...您会发现，即使您的浏览器视口宽度小于 400 像素，浏览器似乎仍会下载 1200x1671 的大图片：

Answer 1

更新

不确定是否有更多优化，但我实现了使其与此一起使用

<nuxt-img
  provider="static"
  src="/images/stairs.jpg"
  width="431"
  height="600"
  class="figure-img img-fluid card-img-top shadow"
  sizes="sm:100vw md:50vw lg:400px"
/>

它正在正确加载图像（关于它们的大小/重量），具体取决于屏幕并在yarn generate 期间生成它们。我的 github 仓库可以在这里找到：https://github.com/kissu/so-debug-nuxt-image

---

这有点取决于您的页面是什么样的。最快的方法是尝试一些100vw 的变体，以较小的分辨率和一些绝对值（如600px），就像你通常在做一些响应式时所做的那样。

切换你的开发工具，看看它是如何用模拟值呈现的，就像这样。

---

此文档也可能是一个很好的起点：https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#resolution_switching_different_sizes

请注意，该模块会为您执行此操作，只是为了理解这个概念。