javascript - 调整窗口大小后如何使图像重新定位？

Question

在 Squarespace 的Adirondack模板中，还有另一个响应式功能，如果您水平调整窗口大小，主照片似乎不会缩放，而是根据窗口大小自行重新定位。我在下面附上了我想要表达的内容的 GIF。

我怎样才能复制这种效果？我所有的尝试都只是导致整个图像缩放，而不仅仅是重新定位自身。

标签： javascripthtmlcss

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/