Center Image inside div vertically using display table property - css

Question

I'm trying to center an image vertically inside the div. I've read few other similar questions here on stackoverflow and decided to use this solution:
<div id="wrapper">
<div id="cell">
<img />
</div>
</div>
#wrapper {display:table;}
#cell {display:table-cell; vertical-align:middle;}
This works great for images smaller than the viewport size. Problem occurs when image is larger in height than the view-port. In that case wrapper div simply becomes the height of the image. And it overflows the page. How do I avoid that.
This wrapper div is part of view-port div. Viewport div is of fixed height and 100% width positioned absolute
#view-port{ height: 600px; width:100% }
EDIT: I think I caused some confusion regarding the question. I've created JSfiddle to explain what I mean
Here is a link: http://jsfiddle.net/sublime/fgTtj/
I want to vertically center the image inside #outer I dont have image dimensions, as you can see on fiddle, it works perfectly, but when #outer divs height goes less than image height, say 200 it cuts the image. I want to instead shrink that image to fit the outer div

Answer 1

This answer has been truncated and edited to meet the needs of the OP.
Using jQuery, here is what I would suggest.
You can get rid of several of your divs and just use a wrapper and your image. The problem with your code above is that you gave your outer div a set height at 300px. This means that it won't ever shrink smaller than that. I've written a small script to account for the window size as well
http://jsfiddle.net/fgTtj/40/
I've set up your HTML like so:
<div class="wrapper">
<img src='http://s13.postimg.org/b7hmfvhyv/css.jpg'></img>
</div>
CSS like so:
.wrapper {
position:relative;
width:100%;
height:300px;
background-color:blue;
overflow:hidden;
}
.wrapper img{
position:absolute;
max-width:100%;
max-height:100%;
}
and the new jQuery looks like this:
function center(){
var imgW = $('img').width();
var imgH = $('img').height();
var half_imgW = imgW / 2;
var half_imgH = imgH / 2;
$('img').css({
left: "50%",
top: "50%",
margin: "-" + half_imgH + "px 0 0 -" + half_imgW + "px"
});
}
$(document).ready(function(){
var wrapper_Height = $('.wrapper').height();
center();
$(window).resize(function(){
console.log(wrapper_Height);
var winH = $(this).height();
var wrapH = $('.wrapper').height();
if(winH <= wrapH){
$('.wrapper').height(winH);
} else {
if(wrapH <= wrapper_Height){
$('.wrapper').height(winH);
}
}
center();
});
});
You can resize this window in any direction and the image will stay centered and not cut off. This only works for one window at the moment, so you would have to adjust the script to accomodate more.
The awesome thing with this is that it will run in just about every browser, where display:table-cell does not work in older browsers such as IE6 and I think IE7.

Answer 2

What is the point of the display:table? You could leave it blank (or use display:inline-block), and add an overflow property.
#wrapper{
overflow:hidden;
}
If you want to be able to scroll to see the rest of the image:
#wrapper{
overflow:scroll;
}

Answer 3

If you don't want the image to extend the viewport height, set the max-height:
#cell img { max-height: 600px; }