设置Unsplash图片为全屏背景却显示放大，如何解决？

我正尝试用Unsplash的图片制作带全屏背景的落地页，已经用MS Paint把图片调整到1200px，但设置为背景图时仍然显示放大效果。

HTML代码 #

<div class="background-image">
  <div class="text-overlay">
    <h1><span> Nom</span> <span>Nom</span> <span>Nosh</span></h1>
    <h3>Share your thoughts and recipes for short meals and snacks here!</h3>
    <p>Introducing Nom Nom Nosh, your ultimate hub for quick and delectable
       meal ideas! Catering to the fast-paced rhythm of modern life, Nom Nom
       Nosh is a blogging haven where users can seamlessly share their thoughts
       and swap recipes for short, satisfying meals and snacks. Whether you're
       a culinary enthusiast seeking to spice up your snack game or someone in
       search of speedy, flavorful solutions for your daily dining, Nom Nom
       Nosh is here to transform your kitchen into a hub of creativity and
       efficiency!
    </p>
  </div>
</div>

CSS代码 #

.background-image {
  background-image    : url(images/chad-montano-eeqbbemH9-c-unsplash.jpg);
  background-size     : cover;
  height              : 100vh;
  background-position : center;
}

• 核心问题是background-size: cover的特性：它会强制图片保持宽高比的同时，拉伸或缩小以完全覆盖容器（这里是占满100视窗高度的全屏容器）。如果图片的宽高比和屏幕/容器的宽高比不匹配，图片就会被裁剪或放大，出现你看到的“放大效果”。
• 若要让图片完整显示、不被放大，可将background-size改为contain，同时添加background-repeat: no-repeat避免图片重复：

.background-image {
  background-image    : url(images/chad-montano-eeqbbemH9-c-unsplash.jpg);
  background-size     : contain;
  background-repeat   : no-repeat;
  background-position : center;
  height              : 100vh;
}

• 但contain会在容器内完整展示图片，若宽高比不匹配，容器会出现空白区域。如果既要全屏覆盖又要尽量减少放大，可尝试这些方案：
  1. 保留cover，选择和屏幕常见宽高比（如16:9）更接近的Unsplash图片，减少不必要的拉伸
  2. 使用background-size: 100% auto或auto 100%，但这会破坏图片宽高比，导致变形
  3. 调整容器尺寸，让它的宽高比和图片一致，不过这可能影响整体页面布局

内容的提问来源于stack exchange，提问作者Olivia Johnson