javascript - 使用 CSS 查看图像的中心

Question

我遇到了一个问题。我在网站上有一张图片，其宽度通常比屏幕大。我想要做的是移动此图像，以便您始终看到中心，即使您正在调整浏览器的大小也是如此。

代码如下:

    .center {
      position: relative;
      margin-left: auto;
      margin-right: auto;
    }

<img class="center" src="picture.jpg">

没有帮助。

我找不到合适的解决方案。使用图像作为 CSS 背景没有帮助，因为我想动态更改图像。

甚至可以用 CSS 做到这一点吗？还是应该使用 JavaScript？

感谢阅读!

Answer 1

使用背景图片。您不仅可以使用 CSS(伪 :hover)更改它，还可以(更有效地)使用 JavaScript。

.center {
    background: transparent url('/path/to/image') center center no-repeat;
    width: 100%;
    height: 100%;
}
.center:hover {
    background: transparent url('/path/to/another/image') center center no-repeat;
}

JavaScript (jQuery)

$('.center').css('background-image','url(/path/to/image)');