Javascript 如何在调整窗口大小后使图像重新居中？

在Squarespace的模板中，还有另一个响应特性，如果水平调整窗口大小，主照片似乎不会缩放，但它会根据窗口大小重新居中。我在下面附上了我想表达的GIF

我怎样才能复制这种效果呢？我所有的尝试都只是导致了整个图像的缩放，而不是重新居中

---

你要找的是css@media规则

这里是一个链接到一个。他们的网站上有一个很好的动态页面示例，类似于gif中包含代码的页面

此外，元素宽度属性中的CSS百分比值在执行类似操作时也会有所帮助

希望这有帮助

---

干杯

效果取决于源图像的比例，但像这样的东西，对吗

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

---

请提供一份报告。请看导向井图像正在调整大小……可能是最大宽度，但只要看来源就会告诉你，我不确定你的意思。在gif中，图像看起来确实缩小了。i、 她在退缩。