تغییر اندازه تصویر

[mohammad kafiyan]

سلام به دوستان
سوالی داشتم :
در فتوشاپ تصویری را با width:940px طراحی کردم حال این تصویر در صفحه وبم در قسمت های متفاوت می خواهم از اون استفاده کنم و می خواهم width:450px بشه (کوچک بشه) ولی قسمتی از تصویر حذف نشه؟؟؟؟؟

[زینب فاطمی]

سلام
خب چرا عرضش رو تو فتوشاپ 450px نمیکنید ؟

[mohammad kafiyan]

مثل اینکه متوجه منظور من نشدید گفتم می خوام در صفحه page دو جا از این تصویر استفاده کنم و اندازه اصلی width=940px که نیاز دارم و بیشتر استفاده می کنم .
در جایی دیگر از صفحه می خواستم استفاده کنم که نخوام مجدد در فتوشاپ با اندازه جدید ایجاد کنم واز همان تصویر با تغییر اندازه استفاده کنم.
در css این امکان وجود داره توی یکسری از سایت ها دیدم ولی چگونه ؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟
مثال : اندازه تصاویر مربوط به header،Box در ستون چپ و راست صفحه اگر دیده باشید

[tamafi6]

شماابعادتصويرراداخل كدهاي htmlصفحه انجام بده


<img src="pic"width="20"height="10">
<img src="pic"width="40"height="20">
<img src="pic"width="60"height="30">

سه تصويرباابعادمختلف

[mokha21]

عکس رو به چه صورت استفاده میکنی؟ (پس زمینه یا تگ img)؟

[mohammad kafiyan]

با سلام
اندازه تصویر این header چوب به صورت زیر و در تصویر بعدا اندازه آن تغییر یافته و کوچک کرده width

99133

99131
سلام به دوستان در ستون سمت چپ اگر نگاه کنیید header مربوط که حالت چوبی شکل داره(عنوان header :افراد حاضر در سایت) سایز را چطور کوچک کرده
چگونه؟؟؟؟؟

[mokha21]

سایز عکس رو کوچیک کنید و بکگراند رو در حالت تکرار شونده قرار دهید (repeat-x) .

[mohammad kafiyan]

متوجه نمی شم منظور از کوچک کردن سایز در فتوشاپ است یا همان width در css است
اگر ممکن است نمونه کد را قرار دهید
با تشکر

[mokha21]

از کدهای زیر استفاده کن (عکسها ضمیمه شده).
میتونی از طریق css اندازه رو تغییر بدی مشکلی بوجود نمیاد.
(عکس ها رو با عجله برش دادم میتونی تمیزتر این کارو بکنی)


<style type="text/css" media="all">
.top{
width:200px;
display:block;
}
.right{
background:url(right.jpg);
float:right;
width:20px;
height:30px;
}
.center{
background:url(center.jpg) repeat-x;
float:right;
width:160px;
height:30px;
text-align:right;
padding-top:5px;
}
.left{
background:url(left.jpg);
float:left;
width:20px;
height:30px;
}
</style>


<div class="top">
<div class="right"></div>
<div class="center">افراد حاضر در سایت</div>
<div class="left"></div>
</div>

[mohammad kafiyan]

ممنون از این که جواب می دهید ولی این روش را خودهم بلد بودم
آدرس سایت را قرار می دهم ببین چطوری استفاده کرده و در ضمن نیازی به این همه کد نویسی نیست
البته از فایربگ مربوط firfox استفاده کن ببین چیزی می فهمی
اگر فهمیدی یک ندای بده
http://www.abdollahi.us/

[mokha21]

دوست عزیز ایشون عکس رو کوچیک نکردن . از همون اندازه اصلی عکس استفاده کردن سپس حاشیه هاشو با عکسهای box-tl.gif و box-tr.gif گرد کرده .

.ja-box-tr {
background: url(../images/box-tr.gif) no-repeat top right;
}

.ja-box-tl {
background: url(../images/box-tl.gif) no-repeat top left;
}


<div class="ja-module ja-box-br module_wood" id="Mod21">
<div class="ja-box-bl"><div class="ja-box-tr"><div class="ja-box-tl clearfix">
<h3><span>افراد حاضر در سايت</span></h3>
<div class="jamod-content ja-box-ct clearfix">
ما&nbsp;10 مهمان&nbsp;و&nbsp;1 عضو&nbsp;آنلاین داریم </div>
</div></div></div>
</div>

[mohammad kafiyan]

دوست عزیز میشه یک نمونه مثال بزنی روی همین تا بتونم درست درک کنم که چطور این کار را انجام داده!!