只是想知道是否可以使用
<div><img src="xxx.jpg" /></div>
- 在浏览器中居中图像
- 减少浏览器宽度以进行响应式布局时,将列表项保持在中心
- 当浏览器小于图像时,它将“不”减小图像大小
- 相反,它将使用滚动条裁剪图像(溢出:隐藏),但仍保持图像中心...
是否可以使用 img 标签来做到这一点?我知道我可以使用 css 使用背景图像轻松执行它。
但由于我在一个 CMS 网站上工作并且图像是由客户端上传的,所以背景图像绝对不是一个解决方案....
只是想知道是否可以使用
<div><img src="xxx.jpg" /></div>
是否可以使用 img 标签来做到这一点?我知道我可以使用 css 使用背景图像轻松执行它。
但由于我在一个 CMS 网站上工作并且图像是由客户端上传的,所以背景图像绝对不是一个解决方案....
我认为第 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来确保在重新调整浏览器窗口大小时图像的中心滚动到视图中。