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

问题描述

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

I am using the code below to attempt the following:

1. 随着浏览器窗口的缩小，图像被裁剪直到浏览器窗口的宽度缩小到800px或更小.
2. 在浏览器窗口宽度等于或小于800像素时，图像应变为反应灵敏.含义:照片中剩下的那部分(在通过缩放浏览器窗口进行裁剪后)应该缩放以及浏览器窗口.

1. As the browser-window is scaled down, the image is cropped till thebrowser-window is scaled down to width 800px or less.
2. At Browser-window width 800 px or less, the image should becomeresponsive. Meaning: that part of the photo that's left remaining(after being cropped by scaling the browser-window) should scalealong with the browser-window.

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

But it's not working. At the moment, while using the code below, the image does crop, and when browser-window width 800px or less is reached the image does become responsive, but only by loading back the complete and uncropped image to do so. I want the cropped portion of photo to become responsive.

任何人都可以帮忙吗?也是> 此处是JSFIDDLE .

Can anyone help please? Also a 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

is this what you want to achieve? 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;
      }
}

这篇关于将浏览器窗口缩放到给定的浏览器窗口宽度时，裁剪图像.然后让图像的其余部分响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！