图像以Firefox为中心但在Chrome上截止

时间:2016-02-21 03:58:41

标签: css css3 google-chrome webkit flexbox

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错误?

1 个答案:

答案 0 :(得分:2)

尝试这个简单的替代方案:

&#13;
&#13;
body { display: flex; }

img { margin: auto; }
&#13;
<body style="margin: 0px;">
  <img src="http://i.imgur.com/I3gA11r.jpg">
</body>
&#13;
&#13;
&#13;

有关详细说明,请参阅:Can't scroll to top of flex item that is overflowing container

请注意,所有主流浏览器except IE 8 & 9都支持flexbox。最近的一些浏览器版本,例如Safari 8和IE10,需要vendor prefixes。要快速添加所需的所有前缀,请使用Autoprefixerthis answer中的更多浏览器兼容性详细信息。