jQuery - Simulate background-size cover

Question

I have two panels on a site with images inside which are always the full width and height of the screen.

Fiddle

.panel {
    float:left;
    width:50%;
    position:relative;
    background-size:cover
}
.panel img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

Basically I am trying to get the same result as background size (left panel) for the right panel which has the img tag inside.

I've tried a few different things but have had no luck in keeping a good image ratio when the page is scaled like background-size

Does anyone know any tricks or a good way to do this with jquery?

Answer 1

To solve the issue for IE - make the image width pixel-based. I changed the width to 800px in the fiddle and it straightened out.

Like this:

.panel {
    float:left;
    width:50%;
    position:relative;
    background-size:cover
}
.panel img {
    position:absolute;
    top:0;
    left:0;
    width:800px;
    height:100%;
}

Here's a fiddle