Масштабирование: form+img?

[Baburek]

Есть форма, которая включает в себя картинку на которой располагаются элементы формы. Как сделать так, чтобы при изменении масштаба элементы и картинка не "разбегались". Масштабировать картинку можно по ширине div'a, а что делать с элементами формы? или вообще как в этом случае размышляем?

HTML:

<div class="boarder-form">
<form>
<img src="./images/boarder.png" />
<div id="list" style="position: absolute; left: 10%; top: 30%;">
  <div>List:</div>
   <div>
          <select name="dep" id="dep" style="height:50%">
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
          </select>
    </div>                                
</div>
</form>
</div>

CSS:

.boarder-form{
	width: 100%;
	height: 100%;
	line-height:0;
    max-height: 756;
    max-width: 308;
}