Image centered on Firefox but cutoff on Chrome

Question

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>

When trying the code on both Firefox and Chrome, you're gonna be able to scroll the whole image with Firefox but not with Chrome.

Is the css correct or is it a chrome/webkit bug ?

score 2 · Accepted Answer · edited May 23 '17 at 11:50

Try this simple alternative:

body { display: flex; }

img { margin: auto; }

<body style="margin: 0px;">
  <img src="http://i.imgur.com/I3gA11r.jpg">
</body>

For a detailed explanation, see: Can't scroll to top of flex item that is overflowing container

Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, use Autoprefixer. More browser compatibility details in this answer.

Image centered on Firefox but cutoff on Chrome

1 Answers1