Масштабирование ЛОГО

[winston3d]

Привет всем! С праздником!!!

Не могли бы подсказать, как лучше сделать лого на сайте.

Всё содержимое сайта помещается в блок с максимальной шириной 1240px

Есть фоновое изображение логотипа (1240x315) и нужно что бы в шапке сайта было это изображение (не перекрытое контентом и масштабируемое в зависимости от ширины окна браузера).

Вот как делаю я:

#wrapper {
margin: 0 auto;
overflow: auto;
max-width: 1240px;
min-width: 400px;
background: #FFFFFF;
border: 1px solid #F1F1F1;
margin-top: 3%;
}
.logo {
width: 100%;
background: url("img/UPLER.jpg") 0% 0% no-repeat;
background-size: contain;
min-height: 102px;
height: 100%;
max-height: 315px;
display: block;
}
<section id="wrapper">
<a class="logo" href="#"></a>
</section>

Проблема заключается в том, что высоту блока я не могу масштаировать. Ширина стоит 100% а высоту блока мне нужно иметь в зависимости от окна браузера но в приделах от 400 до 1240 точек. Не знаю как это сделать, может подскажите или есть другие варианты?

Edited February 23, 2013 by winston3d

[Yazon_Nile]

Следайте логотип имагой.