تغییر اندازه عکس هدر صفحه متناسب با تغییر رزولوشن صفحه

سلام
میدانیم که رزولوشن مونیتور هر نفر با دیگری متفاوت است مثلا یکی 600*800 و دیگری 768*1024 و ...
حالا اگه عکسی در هدر صفحه بگذاریم که عرض ان مثلا1000 و رزولوشن شخص مثلا600*800 باشد انگاه 400 پیکسل از عرض عکس میپرد!
عکس این موضوع نیز صادق است یعنی اگه عرض عکسی مثلا 500 باشد و رزولوشن شخص مثلا 600*800 باشد انگاه 100 پیکسل کم میاید و background-repeat خواه no-repeat باشد و خواه repeat-x باشد باز هم ظاهر خوبی نخواهد داشت.
راه چاره چیست ؟ چطور میتوان مانند طول و عرض عکس را به درصد بیان کرد و نه پیکسل تا از این مشکل جلوگیری کنیم؟
به عبارت دیگر چطور میتونیم متناسب با تغییر رزولوشن مونیتور شخص، طول و عرض عکس نیز متناسب با ان تغیر کند؟

عکس header رو بزار تو یه DIV بعد توی CSS طول و عرض این DIV رو با درصد مشخص کن

یک جور دیگه هم میشه این کار رو کردپ
به این صورت عمل کرد:n05:
[HTML]<img src="PIC!.png" width="20%" heigh="20%">[/HTML]
خواهش می کنم تشویقم نکنید قابل شما رو نداشت
:n01:

manam mondam tosh chera responsive nemishe kard :n27::n19:

کد:

---

<div style="width:100%;height:150px;background-color:#F69;margin:0;padding:0"><img style="width:100%;height:100%;position:absolute" src="vbb"/>
<div style="width:100%;height:100%;position:relative">تست</div>
</div>

---

این کد را امتحان کنید در قسمت div پایین img میتوانید هر بلایی و هر مطلبی رو که خواستید سرش در بیارید.

کلا سعی کنید استایل اینلاین به هیچ المانی ندید.
img رو در داخل div قرار بدید و div رو در media query های متفاوت بر اساس درصد، width و height رو اندازه بدید.