中心和庄稼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来确保只要重新调整浏览器窗口大小，图像的中心就会滚动到视图中。