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%;
}

这种方法始终将图像保持在中央，并没有真正减小图像的大小，但由于我不得不使用负边距，因此无法将不可见的部分滚动到 View 中。

您可以这样代替 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以确保无论何时重新调整浏览器窗口大小时，图像的中心都滚动到 View 中。