javascript - 将浏览器窗口缩放到给定的浏览器窗口宽度时，裁剪图像。然后让图像的其余部分响应

我正在使用下面的代码尝试以下操作：


随着浏览器窗口的缩小，图像被裁剪直到
浏览器窗口的宽度缩小到800像素或更小。
在浏览器窗口宽度为800像素或更小时，图像应变为
反应灵敏。含义：照片中剩下的那部分
（在通过缩放浏览器窗口进行裁剪后）应该缩放
以及浏览器窗口。


但这不起作用。目前，使用下面的代码时，图像确实会裁剪，并且当达到浏览器窗口宽度800px或更小时，图像确实会响应，但只能通过加载完整且未裁剪的图像来响应。我希望照片的裁剪部分能够响应。

有人可以帮忙吗？也是JSFIDDLE HERE。

#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>

最佳答案

这是您要实现的目标吗？ JSfiddle

 #apple-box {
    width: 90%;
    overflow: hidden;
    background-image: url(http://www.stedentripidee.nl/wp-content/uploads/2015/10/stedentrip-new-york.png);
    background-size: cover;
    background-position: center;
    height: 400px;
}
@media only screen and (max-width: 800px) {
      #apple-box:after {
        content: '';
        display:block;
        padding: 28.5%;
      }
    #apple-box{
        height: auto;
      }
}