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

Crop image down when scaling browser-window to given browser-window width. Then let remaining portion of image be responsive

本文关键字：图像 窗口 浏览器 裁剪 然后 余部 响应 缩放      更新时间：2023-09-26

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

  1. 当浏览器窗口按比例缩小时，图像被裁剪到
    2. 浏览器窗口缩放到800px或更小的宽度
  2. 在浏览器窗口宽度小于等于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;
      }
}

我将把图像处理为css中的背景图像。这给了你更多的控制，更少的编码和嵌套。

代码如下:

#apple-box {
  width: 80%;
  height: 100%;
  position: absolute;
  background-image: url("http://www.stedentripidee.nl/wp-content/uploads/2015/10/stedentrip-new-york.png");
  background-size: 125%;
  background-repeat: no-repeat;
  background-position: top left;
}
<div id="apple-box">
</div>

相关文章：