调整窗口大小后，如何使图像自己更新？

Question

在Squarespace的Adirondack模板中，还有另一个响应功能，如果您水平调整窗口大小，主照片似乎不会缩放，而是根据窗口大小自动更新。我在下面提供了我要说明的GIF。

我该如何复制这种效果？我所有的尝试都只是导致整个图像缩放，而不仅仅是重新调整自身。

Answer 1

效果取决于源图像的比例，但是像这样吧？

.img {
  background: url(https://wallpaperbrowse.com/media/images/beautiful-sunset-images-196063.jpg);
  width: 100%;
  height: 700px;
  background-size: cover;
  background-position: 50% 50%;
}

https://jsfiddle.net/jcpzqx5h/6/

Answer 2

您正在寻找的是CSS @media规则。

这里是w3school page about @media rules的链接。他们在自己的网站上有一个动态网页的好例子，就像gif中包含代码的网页一样。

在进行此类操作时，元素的width属性中的CSS百分比值也会有所帮助。

希望这会有所帮助。

干杯！