چرا اینطوری نشان میدهد؟

[mokhtasatxyz]

سلام
من کد های نمایش بنر سایتم را اینطور نوشتم ولی نمیدانم چرا انطور که میخواهم درست نشان نمیدهد



<div class="header">
<img align="middle" dir="rtl" src="images/baner.png" width="100%" height="50%"/>
</div>






و کد css ان


.header {
width:100%;
height:50%;
margin:auto;
text-align:center;
vertical-align:middle;
}

header img{
margin:auto;width:100%;
height:50%;
}




اندازه عکس هم 880 *300 است
من می خواهم با این عکس در هر صفحه نمایش عرض ان را کاملا پر کند و ارتفاع انرا هم مثلا50% باشد ولی الان با تغییر width ارتفاع ان نیز تغییر می کند و مقدار height اصلا کار نمیکند چرا؟
http://www.karyabiatinegar.ir/

[thinkdiff]

یک همچین کدی در css هاتون دارد که پاکش کنید:

img[Attributes Style] {

vertical-align: -webkit-baseline-middle;
direction: rtl;
unicode-bidi: embed;
width: 70%;



height: 20%;

}

width="100%" height="50%" این کد رو هم از قسمت کد های html عکستون پاک کنید