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

Question

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

1. 随着浏览器窗口的缩小，图像被裁剪到 浏览器窗口缩小到 800 像素或更小。
2. 在浏览器窗口宽度为 800 像素或更小时，图像应变为 react 灵敏。含义:照片中剩下的那部分 (通过缩放浏览器窗口裁剪后)应该缩放 连同浏览器窗口。

但它不起作用。目前，在使用下面的代码时，图像确实会被裁剪，当浏览器窗口宽度达到 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>

Answer 1

这就是你想要的吗？ 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;
      }
}