Fill image in skewed container mask - Responsive - CSS3

Question

I'm working on creating skewed mask containers for images.

Problem I'm having is making the image fill the container in a responsive layout using bootstrap.

I tried to use css property background image and set background-size: cover; but the background image gets skewed with the container.

I will try to set an image inside the container and center / match height and width of the container.

Please take a look at my fiddle here. http://jsfiddle.net/RyU9W/3/

EDIT

I Found a plugin that does what I need almost, although I need to adjust for the extra height and width of the container cause by the skewing.

Updated Fiddle http://jsfiddle.net/RyU9W/5/

HTML

    <div class="profile">
        <div class="image"></div>
        <div class="detail"></div>
    </div>

    <div class="profile">
        <div class="image"><img src="http://placekitten.com/g/700/1350" alt=""></div>           
        <div class="detail"></div>
    </div>   

CSS

.profile .image {
    position: relative;
    overflow: hidden;
    height: 400px;
    background: #000 url(http://placekitten.com/g/700/1350) center center;
    background-size: cover;
    -webkit-background-size: cover;
    margin-bottom: 15px;
    transform:skew(0deg,-30deg);
    -ms-transform:skew(0deg,-20deg); /* IE 9 */
    -webkit-transform:skew(0deg,-30deg); /* Safari and Chrome */            
}
.profile .image img {
    position: absolute;
    top: -150px;
}
.profile .image * {
    position: relative;
    transform:skew(0deg,30deg);
    -ms-transform:skew(0deg,30deg); /* IE 9 */
    -webkit-transform:skew(0deg,30deg); /* Safari and Chrome */         
}

Answer 1

You still should be able to use

background-size: cover;

and since your background image gets skewed with the container, set a css rule for it with negative skew values which will revert image to its original form.

In your case it would be transform:skew(0deg,30deg);