CSS: center and scale up or down image while preserving aspect ratio

Question

How to center and scale up or down image while preserving aspect ratio in html/css?

I have a fiddle showing my current solution, but it does not scale up the image w

Answer 1

Add width:100%; height:auto; to your .resize_fit_center so it becomes this:

.resize_fit_center {
    width:100%;
    height:auto;
    max-width:100%;
    max-height:100%;
    vertical-align: middle;
}