Keeping Relative Width/Height Elements

Question

I am I using percentages based grid system to build a page for my personal website which uses a relative positioned banner and an absolute positioned div that falls in the center horizontally and at the bottom of the banner vertically. However, because said div is a screenshot of a webpage it is important to keep its height and its width relative to one another so that the image doesn't distort.

Below is a little code and a jsfiddle -

<div id="aps-group-banner">
    <div id="aps-group-banner-wrap">
        <div class="screenshot-banner"></div>
    </div>
</div>


#banner {
    height:100%;  
    background:red;
}
#banner-wrap {
    position:relative;
    width:67%; height:100%; 
}
.screenshot {
    position:absolute;
    background:url(/img/case-study/aps-group/screenshot-banner.jpg) top left;
    background-size:100% 100%;
    width:75%; min-height:496px; bottom:0; margin-left:-37.5%; left:50%;
}

http://jsfiddle.net/sHanf/

Hope you guys can help! Thanks in advance

Liam

Answer 1

Maybe I don't understand the question completely, but is this what you need?

http://jsfiddle.net/RpW4r/

I just changed the background-size to 100% auto;

Answer 2

Give this a try:

.screenshot {
  position:absolute;
  background: url(http://liamhodnett.com/img/case-study/aps-group/screenshot-banner.jpg) bottom left no-repeat;
  background-size:100% auto;
  width:75%; min-height:496px; bottom:0; margin-left:-37.5%; left:50%;
}

This will scale the background to 100% width and adjust its height to be proportional, plus move it to the bottom of the .screenshot element.

Fiddle link: http://jsfiddle.net/sHanf/7/