img {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<body style="margin: 0px;">
<img src="http://i.imgur.com/I3gA11r.jpg">
</body>
在 Firefox 和 Chrome 上尝试该代码时,您将能够使用 Firefox 滚动整个图像,但不能使用 Chrome 滚动整个图像。
CSS 正确还是 chrome/webkit 错误?
最佳答案
尝试这个简单的替代方案:
body { display: flex; }
img { margin: auto; }
<body style="margin: 0px;">
<img src="http://i.imgur.com/I3gA11r.jpg">
</body>
详细解释参见:Can't scroll to top of flex item that is overflowing container
请注意,所有主流浏览器都支持 Flexbox,except IE 8 & 9 。一些最新的浏览器版本,例如 Safari 8 和 IE10,需要 vendor prefixes 。要快速添加所需的所有前缀,请使用 Autoprefixer 。更多浏览器兼容性详细信息请参阅 this answer .
关于css - 图像以 Firefox 为中心,但在 Chrome 上被截断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35532130/