javascript - 居中并裁剪 img 标签

Question

只是想知道是否可以使用

<div><img src="xxx.jpg" /></div>

1. 在浏览器中居中图像
2. 减少浏览器宽度以进行响应式布局时，将列表项保持在中心
3. 当浏览器小于图像时，它将“不”减小图像大小
4. 相反，它将使用滚动条裁剪图像（溢出：隐藏），但仍保持图像中心...

是否可以使用 img 标签来做到这一点？我知道我可以使用 css 使用背景图像轻松执行它。

但由于我在一个 CMS 网站上工作并且图像是由客户端上传的，所以背景图像绝对不是一个解决方案....

Answer 1

我认为第 3 点和第 4 点使仅使用 CSS 无法做到这一点，因为您必须使用 CSS 设置滚动位置，我能想到的仅使用 CSS 的最好方法是：jsFiddle和Fullscreen Demo.

body {
    text-align: center;
}
div {
    max-width: 100%;
}
img {
    margin: 0 -100% 0 -100%;
}

这种方法始终将图像保持在中心，并且它并没有真正减小图像大小，但是因为我不得不使用负边距，所以您无法将不可见部分滚动到视图中。

而不是采用 JS 方法，您可以这样做：jsFiddle和Fullscreen Demo.

CSS

body {
    text-align: center;
}
div {
    width: 100%;
    overflow-x: auto;
}

JS

$(window).resize(function () {
    $("div").scrollLeft(($("img").width() / 2) - ($(this).width() / 2))
});

这种方法使用jQuery来确保在重新调整浏览器窗口大小时图像的中心滚动到视图中。