How to maintain proportion on max width and fixed height? - css

Question

I am trying to make something like this. The top image is 100% width of the browser but shorter than 100%height of the browser, so the content peeks up a little bit ( the tops of the two images below are showing ).
Also, when the brower size is scaled, it maintains it's aspect ratio and the two images always show unless the responsive breaking point #media only screen and (min-width:768px) has all of the images stack on top of eachother.
Here is my css:
.thumb-12 {
width: 100%;
height: 100%;
position: relative;
}
.thumb-12 img {
width:100%;
height: 100%;
max-height:700px;
background-position:center center;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-repeat:no-repeat;
z-index:100;
}
this works well until it gets passed 1500px or so width wise, then it starts to stretch the image.
Is this possible to do with pure css?

Answer 1

I added a wrapper div around the image div, and gave it overflow:hidden and the fixed height of 700px; while keeping the height of the actual image 100%;
.thumb-wrapper {
max-height: 700px;
overflow: hidden;
}
.thumb-12 {
width: 100%;
height: 100%;
position: relative;
}
.thumb-12 img {
width:100%;
height: 100%;
height: auto;
background-position:center center;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-repeat:no-repeat;
z-index:100;
}

Answer 2

It makes no sense applying a background to an img tag. Apply this directly to your container (which seems to be thumb-12) and remove the img tag.
.thumb-12 {
width: 100%;
height: 700px;
background: url('your_image.jpg') center center no-repeat;
background-size: cover;
}
Please note that the parent of this element must have a determined height if you want height: 100%; to work on all browsers (except if all parents have the same property, until body).