مشکل در تنظیم عکس در css

[reza69]

سلام
من هر کاری میکنم عکسم با سایز فیت بشه نمیشه.
یعنی میخوام عکسم کل فضای کادر عکس رو بپوشونه.
این کدم:

#blog-line-horizon {
background: url('/picweb/line.png') no-repeat center;
width: 996px;
height: 25px;
text-align: center;
margin:0px auto 0px auto;

}

[Maryam.J]

اگه میخوای فیت بشه باید سایز عکست 25*996 باشه.
شاید هم پدینگ داره. چون پدینگ روی طول حساب میشه. اینو اضافه کن:
padding:0;
اگه درست نشد یه عکس بذار ببینیم چطوریه که میگی فیت نمیشه! :متفکر:

[Maryam.J]

ببین تو IE کار میکنه!؟!! :لبخند:

[reza69]

تو ie کار میکنه
ولی وقتی بیش از حد میکشمش (از پهنا) عکس از ارتفاعش کم میشه

[reza69]

وقتی عکسو با کنترل image امتحان میکنم انجام میشه
ولی با css نه

[reza69]

فهمیدم
ولی اگه با css بشه بهتره کسی میتونه این کد رو با css تنظیم کنه؟

<div style="text-align: center;">
<img src="/picweb/baner site2.jpg" style="width: 900px; height: 200px;" /></div>

[General-Xenon]

فهمیدم
ولی اگه با css بشه بهتره کسی میتونه این کد رو با css تنظیم کنه؟

<div style="text-align: center;">
<img src="/picweb/baner site2.jpg" style="width: 900px; height: 200px;" /></div>
سلام کاری نداره که .. اگر از img tag استفاده میکنی .. خب
<div>
<img src="#" />
</div>
<style>
div { position:relative; /* ... */ }
div img {position:absolute; width:100%; height:100%; top:0px; left:0px; }
</style>

اگر مستقیم از CSS استفاده کنی از این کد باید بهره بگیری
<style>
div { background-size: 100% 100%; }
</style>

[reza69]

سلام کاری نداره که .. اگر از img tag استفاده میکنی .. خب
<div>
<img src="#" />
</div>
<style>
div { position:relative; /* ... */ }
div img {position:absolute; width:100%; height:100%; top:0px; left:0px; }
</style>

اگر مستقیم از CSS استفاده کنی از این کد باید بهره بگیری
<style>
div { background-size: 100% 100%; }
</style>

نشد!!!!!!!!!!!!!!!!!!
بیشتر توضیح بدید

[tree1371]

اینطور مواقع فقط width رو مقدار میدن اونم با درصد نه با پیکسل . height رو حذف کنید.

[reza69]

نمیشه
ببین داخل css

#blog-title{
background:url('/picweb/baner site2.jpg') no-repeat ;
width: 900px;
height: 200px;
margin:0px auto 0px auto;
}

وداخل html


<div id="blog-title"></div>

ببینید این کد درسته؟کجاش اشکال داره؟

[General-Xenon]

نمیشه
ببین داخل css

#blog-title{
background:url('/picweb/baner site2.jpg') no-repeat ;
width: 900px;
height: 200px;
margin:0px auto 0px auto;
}

وداخل html


<div id="blog-title"></div>

ببینید این کد درسته؟کجاش اشکال داره؟

ببین عزیزم اگر CSS رو بلد باشی
این کد
div { background-size: 100% 100%; }
میاد تصاویری که شما با استفاده از این کد بهش نسبت دادی رو میزون میکنه
background:url('/picweb/baner site2.jpg') no-repeat ;

اما اگر شما با استفاده از تگ img عکس رو درون Div قرار دادی باید با اسفاده از این کد عکست رو میزون کنی ... خیلی سادست این مسئله .. بیشتر دقت کن
ببین این کدت که این جا گذاشتی

<div style="text-align: center;">
<img src="/picweb/baner site2.jpg" style="width: 900px; height: 200px;" /></div>
باید به Div حالا یا کلاس یا آی دی یا اینکه بصورت Tag ، استایل بدی
این مثال من مثالی هست که تو به Div نه آی دی دادی نه کلاس ، خب راهش Tag هست ... حالا خودت تغییر بده....و بعد از ثبت در CSS باید Style مربوط به خود img "style="width: 900px; height: 200px;"" برش داری
div { position:relative; /* ... */ }
div img {position:absolute; width:100%; height:100%; top:0px; left:0px; }

[reza69]

ممنون از کمکت میشه یه کلام بگی تو css چه کدی بنویسم و تو html چه کدی؟

[General-Xenon]

ممنون از کمکت میشه یه کلام بگی تو css چه کدی بنویسم و تو html چه کدی؟


خدایا !!!!!!
میتونی محتویات style رو بنویسی تو CSS یا اینکه مستقیم همینو تو HTML بنویسی
<div class="a">
<img src="#" />
</div>
<style>
.a { display: block; position: relative; }
.a img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
</style>



2
<div class="a"></div>
<style>
.a { display: block; position: relative; background-image:url(#); background-position:0px 0px; background-size:100% 100%; width:500px; height:100px; }
</style>

[reza69]

ممنون درست شد

[mbasirati]

سلام
میتونی از این هم استفاده کنی:
background-size:cover