我正在尝试使用NextJS的Image组件来调整文章图片预览的大小。我决定使用静态导入，因为它允许我不指定图片的宽度和高度，因为它可能是未知的。我使用Bootstrap 5.2进行样式设置。
但是无论我尝试什么布局和大小，我都会得到原始大小的图像，即1500x1000px而不是450x300px（父容器的大致大小）。
我的代码：

<div className="col-12 col-sm-3 d-sm-block">
  <Image src={img} className="img-fluid" alt={title} />
</div>

它生成以下输出：

<div class="col-12 col-sm-3 d-sm-block">
  <span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%">
    <span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%">
      <img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0"alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%271000%27%20height=%271500%27/%3e" />
    </span>
    <img alt="alt text" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="card-img img-fluid" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" />
    <noscript>
      <img alt="alt text" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftitle.7fd0fd10.png&amp;w=1080&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftitle.7fd0fd10.png&amp;w=2048&amp;q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftitle.7fd0fd10.png&amp;w=2048&amp;q=75" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="card-img img-fluid" loading="lazy" />
    </noscript>
  </span>
</div>