Question

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

随着浏览器窗口缩小，图像被裁剪直到浏览器窗口缩小到宽度800px或更低。
在浏览器窗口宽度为800像素或更低时，图像应该变为响应。含义：照片的剩余部分（通过缩放浏览器窗口裁剪后）应缩放以及浏览器窗口。

但它没有用。目前，在使用下面的代码时，图像会裁剪，当浏览器窗口宽度达到800px或更低时，图像会响应，但只能通过加载完整和未剪切的图像来实现。我希望照片的裁剪部分能够响应。

有人可以帮忙吗？还有JSFIDDLE HERE。

＆＃13;

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

＆＃13;

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

＆＃13;

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;
      }
}

Answer 2

我会将图像作为背景图像处理在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>

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

2 个答案: