Solution for variable height elements within relative width div - css

Question

I have an image placed within a relative width div as part of a responsive page design. The div's width (and hence the image's size) is set to ensure that content beneath it appears above the fold on screens down to a certain resolution.
A minority of images that appear here have different dimensions (e.g. 4x5 format vs. 4x6). These taller images push the content beneath it below the fold.
I want to maintain the div's height for the 4x6 dimension, which represents the majority of images, such that when an alt format image appears here, the top and bottom of the image are evenly clipped.
I've tried a couple different approaches, none with the desired effect. Applying a max-height on the image element slightly distorts taller images. I tried max-height on the wrapper div with overflow:hidden, but that doesn't constrain the image element.
I applied max-height to that mainImage div, too, and this almost works. However, as you can see from the CSS, I'm using background-color and padding to create a border around the image. Setting max-height on the main div forces the bottom border of the image element outside of the main div. I also tried applying the border to mainImage, but the bottom border still does not appear. Lastly, with max-height applied to the div and not the image, the image is not centered vertically within the div.
I'm not sure how to accomplish what I'm after, or whether it's possible in a responsive design (i.e. without a fixed height). Any thoughts?
Here's the HTML:
<wrapper>
<header></header>
<content>
<!--the main image -->
<section>
<div id="mainImage" role="main">
<div class="in mainImageWrapper">
<img src="[IMAGEFILE]" />
</div><!--end mainImageWrapper -->
</div><!--end mainImage-->
</section>
<!-- more content -->
</content>
</wrapper>
And here's the CSS:
#wrapper {
width: 100%;
min-height:100%;
height: auto !important;
height:100%;
border: none;
}
#content {
margin: 0 auto;
width: 90%;
max-width: 980px;
}
#mainImage {
margin: 1% auto 3% auto;
width: 100%;
overflow: hidden;
}
.mainImageWrapper {
width: 100%;
max-height: 634px; /* The aforementioned fix that doesn't provide the desired effect */
overflow:hidden;
margin: 0 auto;
padding: 0;
display: table-cell;
text-align: center;
position: relative;
}
#mainImage img {
width: 97%;
padding: 1.5%;
background: #FFFFFF;
margin: auto;
vertical-align: middle;
-moz-box-shadow: 1px 2px 8px #1A1A1A;
-webkit-box-shadow: 1px 2px 8px #1A1A1A;
box-shadow: 1px 2px 8px #1A1A1A;
}

Answer 1

So, it appears that what I want to accomplish above isn't possible through css. I wound up implementing phpThumb and using the z-crop parameter to crop images that exceed a certain height from the center. Works well for most instances. Only issue I've encountered with this approach is that, since this is a photography website that includes watermarked images, occasionally the crop cuts off the watermark in an awkward way.