عضویت در انجمن
ورود به انجمن
نام کاربری :
پسورد :
رمز عبور را فراموش کردم
اینجا هستید :
انجمن فردبلاگ آموزش و ترفند آموزش css آموزش هم اندازه کردن تصاویر با قالب

آموزش هم اندازه کردن تصاویر با قالب

fard 1347 مشاهده

۱۹ تير ۱۳۹۲ - 17:59 http://fard.fardblog.com/
مدتها بود که میخواستم در وبلاگ شخصیم این آموزش رو قرار بدم اما بدلیل کمبود وقت نمیشد .
خب بریم سر آموزش ...

در وبلاگ ها و حتی وبسایت های زیادی دیده شده که اندازه یک تصویر از قالب وبلاگ یا سایت بیشتر شده و از قالب زده بیرون ... وامصیبتااااااا

یه روش خیلی ساده هست برای حل این مشکل و اونم اینه که برید توی ویرایش مطلب و اندازه تصویر رو کوچیک کنید . اما بعضی وقتا پیش میاد که شما اندازه قالب رو کوچیک میکنید . مثلا یه قالب جدید نصب میکنید که اندازه اش کوچیک تر از قبلی هست و ممکنه 95% تصاویر از قالب بیرون بزنن که خب رفتن به ویرایش مطلب تمام اینا و کوچیک کردنشون یذره سخته !!! البته فقط یذره ...

امروز یه روش خیلی ساده برای هم اندازه کردن تصاویر یا قالب براتون میگم که کارتون رو راحت میکنه .
همانطور که میدونید مطالب در یک div یا table یا یه چیزی بالاخره جا قرار میگیرن
حالا فرض من بر اینه که شما اون div حاوی مطالب رو در قالب وبلاگتون پیدا کردید ...
اگر اون div دارای کلاس یا آیدی بود که هیچ ولی اگه نبود ترجیحا یه کلاس براش اختصاص بدید .
اینگونه :
کد :
<div class="posts_container">
... مطالب ...
</div>
حالا...
برای این کلاس این css رو بذارید :
کد :
.posts_container img{
max-width:600px;
}

تموم !
از این به بعد هرچی عکس بیشتر از 600px پهنا بذارید ، این کدهای css اونو به 600 کاهش میدن و اینجوری میشه که عکس از قالب بیرون نمیزنه .
توجه داشته باشید که div حاوی مطالب شما ممکنه پهناش کمتر یا بیشتر از 600 باشه پس باید این 600 رو دستکاری کنید .

امیدوارم استفادات ببرید .

دیدگاه اعضا

2sms

۲۱ تير ۱۳۹۲ - 12:57
آموزش خیلی خوبی بود ، وقتی وبلاگایی رو می بینم که تصاویر از متن زده بیرون اعصابم خورد میشه.

mnabik

۲۱ تير ۱۳۹۲ - 13:07 http://game4u.fardblog.com
آره راس میگی تعیین max-width برای تصاویر و دادن خاصیت text-wrap:break برای content خیلی واجبه ...

2nya

۲۲ تير ۱۳۹۲ - 13:10
آموزش خوبی بود ، امید که استفادات ببریم

و خداوند رو شاکریم بخاطر این دست آموزشات شما اونم از نوع css ;)

youfile

۳ مرداد ۱۳۹۲ - 01:05 www.salar810.760.ir
ممنون!;)

askari

۹ مرداد ۱۳۹۲ - 11:59 www.askariamir.ir
ممنون از آموزشتون
دیدگاهی یافت نشد !