So I've found similar questions but none that answer all the questions I have and I know there must be a simple jQuery answer to this. I've got multiple images that are being dynamically placed in their own containing div that have overflow:hidden, they need to fill their containing divs and be centered(horizontally and vertically) also. The containing divs will be different sizes as well.

So in short:

• multiple different sized images fill and center in containing div.
• containing divs will be different sizes.
• will be used multiple times on a page.

Hopefully this image helps explain what I'm after. Click here to view the image.

HTML I'm using but can be changed

<div class="imageHolder">
    <div class="first SlideImage">
        <img src="..." alt="..."/>
    </div>
    <div class="second SlideImage">
        <img src="..." alt="..."/>
    </div>
    <div class="third SlideImage">
        <img src="..." alt="..."/>
    </div>
</div>

And the CSS

.imageHandler{
    float:left;
    width:764px;
    height:70px;
    margin:1px 0px 0px;
}
.imageHolder .SlideImage{
    float:left;
    position:relative;
    overflow:hidden;
}
.imageHolder .SlideImage img{
    position:absolute;
}
.imageHolder .first.SlideImage{
    width:381px;
    height:339px;
    margin-right:1px;
}
.imageHolder .second.SlideImage{margin-bottom:1px;}
.imageHolder .second.SlideImage, .imageHolder .third.SlideImage {
    width: 382px;
    height: 169px;
}

Ask me anything if this doesn't make sense, thanks in advance