CSS Responsive Images either max-width or max-height

Question

I'm currently working on my very first responsive webdesign working with Bootstrap 3.

What I now have is a full-width grid of user profile images. These images have a parent container which must be fully filled by the image. The parent container must have a fixed height because of the requested layout.

The problem is: Using CSS I only know how to fit either the width or the height, not depending on the size of the container.

You can see the problem in this jsfiddle: http://jsfiddle.net/usD2d/

li /* container */ {
    display: block;
    overflow: hidden;
    float: left;
    width: 25%;
    height: 100px; /* something fixed */
}
li img {
    width: 100%;
    min-height: 100%; /* destroys aspect ratio */
}

If you have a large screen, the images will fit perfectly. Having smaller devices the images will lose their aspect ratio.

Surely I could use @media(min-width) and change the img from width to height, but due to using BootStrap and having a very dynamic layout (collapsing sidebar, etc) this could become very tricky.

Is there any CSS only solution? If not, is there a great jQuery solution maybe also providing a focus point where to keep the focus on when cropping?

Thank you very much in advance!

Solution

If you want to fill entire space with image clipping it, ratio will be preserved but image will be partially hidden. vertical-align and negative margin can be used.

example: http://jsfiddle.net/usD2d/2/ keeping center image in center(like would a background-position: center center ;.

ul {
    width: 100%;
}
li {
    display: block;
    float: left;
    width: 24%;
    height: 150px;
    overflow: hidden;
    border: 1px solid black;
    text-align:center;/* set image in center */
    line-height:150px;/* set image or text right in middle;*/
}
img {
    min-width: 100%;
    vertical-align:middle;/* okay see it in middle , but you can tune this */
    margin:-50% -100%; /* okay, you can tune margin to crop/clip other area */
}

the negative margin reduce virtually size of image wich will center(text-align ) and sit on baseline set by line-height.

This a CSS cropping.