使Hero Image充满手机整个屏幕而不破坏质量的最佳方法？

如何解决使Hero Image充满手机整个屏幕而不破坏质量的最佳方法？

当您缩小屏幕https://sweetbasilvail.com/时，我正在尝试复制这些图像在此网站上的更改方式

我继续添加了从他们的网站中看到的CSS，但这仍然只是在移动设备上缩小我的形象，而不是在这个网站上这样做

      .hero {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-color: #211f1f;
      }

      img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-size: cover;
        background-position: center;
      }

所以我有这张图片，希望成为整个主屏幕的背景，但是如果我在下面使用此代码并将其缩小到移动设备，则基本上可以压缩该图片。

 img {
width: 100vw;
height: 100vw;
 }

在移动设备上，最终看起来像这样

如果我使用常规的响应式CSS，它会缩小图像并最终在下面留下一个巨大的空白

 img {
 width: 100%;
 height: auto;
 }

因此，我不确定如何在不牺牲图像质量或失真外观的情况下将图像显示为整个背景。在移动设备上缩小图像是否正常？还是使用完整图像背景的正确方法？

请注意，第二个图像具有巨大的空白，是原始图像在100％宽度时的外观；

解决方法

使用background-size: cover

#bgimg{
  height: 100vh;
  width: 100vw;
  background-image: url(https://placekitten.com/1000/500);
  background-size:cover;
  background-position: center;
}

<div id='bgimg'></div>

您要保留比例，因此在width: 100%上使用div并更改其背景图像。这比HTML img标记要容易得多。

CodePen（https://codepen.io/ma-henderson/pen/eYzGwJe?editors=1100）上的快速代码段

<div class="container">
<header class="header">
  <nav class="header__nav-item">Our Menu</nav>
  <nav class="header__nav-item">Our Concept</nav>
  <nav class="header__nav-item">Locations</nav>
</header>

<div class="hero"></div>

<footer class="footer">
  <nav class="footer__nav-item">Gallery</nav>
  <nav class="footer__nav-item">Special Events</nav>
  <nav class="footer__nav-item">Catering</nav>
</footer>  
</div>

.container {
  posiiton: relative;
}

.header{
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  padding: 1rem 0;
  z-index: 3;
  color: white;
  background: rgba(0,.3);
  
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;  
}

.hero{
  background-image: url("https://images.unsplash.com/photo-1572116469696-31de0f17cc34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1934&q=80");
  /*   I've added the below line to keep it always centered regardless of viewport width,change it to your liking,you can google "background-position w3 schools" for more info */
  background-position: 50% 50%;
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

.footer{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1rem 0;
  z-index: 3;
  color: white;
  background: rgba(0,.3);
  
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;  
}

您有两种选择，具体取决于您的用例。

如果您希望img充满整个屏幕，但又不变形，则可以使用object-fit: cover。当然，通过这种方式，如果图像与高度相比非常宽，则在纵向模式下，您会从左侧和右侧裁剪一些位，而在横向模式下，图像会从顶部和底部裁剪，但是无论哪种情况，屏幕都将被覆盖。 >

如果让用户看到整个图像（无论其纵横比与视口的纵横比有关）很重要，请使用object-fit: contain。这将在图像的侧面或顶部和底部留出一定的空间，具体取决于图像的纵横比与视口的比较。

object-fit在浏览器上相当广泛，但在任何版本的IE上都没有。

注意：对于背景图像（而不是img），请使用background-size：覆盖或包含。

这样做并没有真正破坏质量，而是在延伸质量，因为这就是您要告诉我们的。第二种选择是正常的，您只想用下面的内容填充它，以免出现空白。但这并不能填满整个屏幕。

您可能希望使用media query，以便浏览器能够检测到用户何时在移动设备上，然后可以裁剪图像的侧面以使其合适而无需拉伸，可以使用诸如Photoshop之类的方法手动进行，或使用CSS，请参见此处的操作方法：How to automatically crop and center an image