Vertically centering unknown content that might need a scrollbar in a div - html

Question

I have an image that could be smaller than the user's browser, or larger, vertically centered in a div. I'd like a CSS-only solution, but based on the amount of research I've done I am beginning to be skeptical.
More precisely: if the image is smaller (height-wise) than the browser's height, it should be vertically centered -- if the image is taller than the browser's height, there should be a scroll bar to see the rest of the image. This works perfectly in Firefox, but not in Chrome -- and I cannot figure out why.
On Chrome, the image is vertically shifted above the scrollbar so it is still being centered, even though it is too tall. Any ideas? Minimum browser requirements is IE9+, Firefox, Chrome, and Safari (all latest versions of those).
/* This element just fills the entire browser window */
.container {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1000;
}
/* This has a little bit of horizontal spacing, but is centered and takes up the full height of the screen. */
.item {
position: absolute;
min-height: 100%;
top: 0;
left: 0;
overflow-y: auto;
text-align: center;
width: calc(100% - 200px);
margin: 0 100px;
}
.item img {
max-width: 100%;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<div class="container">
<div class="item">
<img src="dummy.jpg">
</div>
</div>

Answer 1

So, I've got something working -- but it still has one problem (reduced a bigger problem to a smaller one).
/* This element just fills the entire browser window */
.container {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1000;
}
/* This has a little bit of horizontal spacing, but is centered and takes up the full height of the screen. */
.item {
position: absolute;
height: 100%;
top: 0;
left: 0;
overflow-y: auto;
text-align: center;
width: calc(100% - 200px);
margin: 0 100px;
}
.item-box{
background-image: url(dummy.jpg);
background-position: center;
background-size: 100% auto;
background-repeat: no-repeat;
width: 100%;
min-height: 100%;
}
.item img {
max-width: 100%;
opacity: 0 !important;
max-width: 100%;
}
<div class="container">
<div class="item">
<div class="item-box">
<img src="dummy.jpg">
</div>
</div>
</div>
This works as the original problem was posed, in that now if the image is smaller, the box will be centered, but if the image is too tall there will be a scrollbar. No cutoff in non-firefox browsers. The new issue is that the image is not entirely selectable, because the invisible image is fixed to the top instead of centered (the original problem), so you can't "right-click to download image" or any of the stuff that the entire point of using an img tag, was meant for.
Any further ideas on how to use this solution?