ورود

View Full Version : حرفه ای: تغییر خودکار طول عکس توی یک Div



tafrihat
پنج شنبه 11 فروردین 1390, 20:03 عصر
با عرض سلام و خسته نباشید
من یک DIV دارم به اسم body که طولش 500 هست و توی این div متن و عکس قرار می گیرد که این عکس های بعضی هاش طولش بیشتر از 500 پیکسل هست و قالب رو به هم میریزد
چه جوری میتونم طول عکس هایی که بیشتر از 500 هست رو خودکار تغییر بدهم که قالب رو بهم نریزد و طوی div نمایش بدهد

ricky22
پنج شنبه 11 فروردین 1390, 20:36 عصر
سلام دوست عزیز.
از این (http://plugins.jquery.com/project/imgscale)پلاگین استفاده کنید.
در صحفه ای که لینک کردم نمونه کد و مثال هست.
موفق باشید.

tafrihat
شنبه 13 فروردین 1390, 01:37 صبح
صفحه من به این شکل هست


<div class="Body3">
<center><img src="32323.jpg"></center>
<font face="tahoma" style="font-size:9pt;" color="000000">
سلام حال شما خوبه؟
<a href="http://domain.com"><img src="66332.jpg" border="0"></a>
<a href="http://domain.com"><img src="5566.jpg" border="0"></a>
<a href="http://domain.com"><img src="99855.jpg" border="0"></a>
</font>
</div>

اینم کد css برای Body3
#Body3 { width: 500px ; background-color:#FFFFFF; padding-top:5px }
حالا من میخوام هر چی عکس بعد از تگ <center></center> هست رو اگر طولش بیشتر از 500 هست تغییر طول بده به 500
یعنی این 3 تا عکس میشه


<a href="http://domain.com"><img src="66332.jpg" border="0"></a>
<a href="http://domain.com"><img src="5566.jpg" border="0"></a>
<a href="http://domain.com"><img src="99855.jpg" border="0"></a>

tafrihat
شنبه 13 فروردین 1390, 17:54 عصر
این نمونه سایتی هست که من هم به این شکل میخوام پیاده سازی کنم
http://www.funpatogh.com/article/3967-%D8%B9%DA%A9%D8%B3-%D8%A7%D8%A8%D8%B1%D8%A7%D9%87%DB%8C%D9%85-%D8%AA%D8%A7%D8%AA%D9%84%DB%8C%D8%B3%D8%B3-%D8%AF%D8%B1-%D8%A8%DB%8C%D9%85%D8%A7%D8%B1%D8%B3%D8%AA%D8%A7%D 9%86.html
عکسی که توش هست سایزش هست

470px × 376px
اما در واقع سایز اصلیش 590px × 472px بوده که میتونید از لینک زیر ببیند
http://www.funpatogh.com/uploads/voroojak/20110328/a243ed42da.jpg

به طور خودکار عکس تغییر سایز میدهد و توی div که برای تعبیه شده کامل نمایش داده میشود بدون اینکه قالب رو به هم بریزد
میشه توضیح بدید که چی کار کرده

azaditafakor
شنبه 13 فروردین 1390, 21:44 عصر
اگه سی اس اس صفحه اش رو بخونی اینو پیدا میکنی :


.body img{
max-width:470px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px;
border:1px #CAD5DB solid;
padding:4px}