javascript - 继续裁剪图像到 div 宽度，直到窗口缩放到一定宽度以下，然后使图像的其余部分响应

Question

THIS QUESTION HAS BEEN MOVED HERE

当缩放浏览器窗口时，我希望裁剪图像直到浏览器窗口达到一定宽度，然后我希望图像能够响应并保持其裁剪状态。在示例中，您可以看到当窗口达到 800 像素时图像失去其裁剪状态，它确实变得响应，但我需要它在达到 800 像素时的裁剪状态下执行此操作。

#apple-box {
  width: 80%;
  overflow: hidden;
}

 @media screen and (max-width: 800px) {
      #big-apple {
        width: 100vw;
}

<div id="apple-box">
  <img id="big-apple" src="http://www.stedentripidee.nl/wp-content/uploads/2015/10/stedentrip-new-york.png">
</div>

Answer 1

设置object-fit 覆盖以裁剪图像。

#apple-box {
  width: 80%;
  margin: 0 auto; /* to center the div */
}

#big-apple {
  height: 482px;
  width: 100%;
  object-fit: cover;
}

@media screen and (max-width: 800px) {
  #big-apple {
    height: auto;
    object-fit: fill;
  }
}

<div id="apple-box">
  <img id="big-apple" src="http://www.stedentripidee.nl/wp-content/uploads/2015/10/stedentrip-new-york.png">
</div>