Question

当缩放浏览器窗口时，我希望裁剪图像直到浏览器窗口达到一定的宽度，然后我希望图像能够响应并保持其裁剪状态。在该示例中，您可以看到当窗口达到800像素时图像失去其裁剪状态，它确实响应，但我需要它在达到800像素时的裁剪状态下执行此操作。

#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

将object-fit设置为cover以裁剪图像。

＆＃13;

#apple-box {
  width: 80%;
  margin: 0 auto; /* to center the div */
}

#big-apple {
  height: 482px;
  width: 100%;
  object-fit: cover;
}

@media screen and (max-width: 800px) {
  #big-apple {
    height: auto;
    object-fit: fill;
  }
}

＆＃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;

保持将图像裁剪为div宽度，直到窗口缩放到某个宽度以下，然后使图像的剩余部分响应

1 个答案: