Maybe I don't understand the question completely, but is this what you need?
I just changed the background-size
to 100% auto;
Вопрос
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%;
}
Hope you guys can help! Thanks in advance
Liam
Решение
Maybe I don't understand the question completely, but is this what you need?
I just changed the background-size
to 100% auto;
Другие советы
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/