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

You can drop the inner img element and do like this.

This will work no matter image proportions.

.container {
    margin: 10px;
    width: 115px;
    height: 115px;
    border: 1px solid red;
    background: url(http://i.imgur.com/H9lpVkZ.jpg) no-repeat center center;
    background-size: contain;    
}

This one should scale up

If you know each image prop. for each container you can simply keep your html and do this.

.container {
    margin: 10px;
    width: 115px;
    height: 115px;
    line-height: 115px;
    text-align: center;
    border: 1px solid red;
}
.resize_fit_center {
    vertical-align: middle;
}
.fit_width {
    width:100%;
}
.fit_height {
    height:100%;
}

    



    



    


This one should scale up