مشکل کشیده شدن تصاویر در css

ساعت : ۱۷:۵۶

تاریخ : ۴ دی ۱۳۹۷

چطور مشکل کشیده شدن تصاویر در css را برطرف کنیم؟

حتما تا حالا شده که تناسب برخی از تصاویر سایتتون بهم بخوره و در کادر یا باکسی که واسش در نظر گرفتید یک حالت کشیدگی به خودش بگیره. ما تو این مقاله قصد داریم که علت این مشکل رو باهم بررسی کنیم و مشکل کشیده شدن تصاویر در css رو هم بهتون آموزش بدیم.

کشیدگی تصاویر در css میتونه یکی از دلایل زیر رو داشته باشه :

حل مشکل گشیده شدن تصاویر در css

خب قبل از هر چیز مهم ترین مطلب اینه که به سایز عکسمون دقت کنیم! خیلی از برنامه نویس ها یا ادمین وب سایت ها به این موضوع دقت نمی کنن که سایز عکس شون با سایز فضایی که برای اون در نظر گرفتن متناسب باشه. یعنی مثلا یک برنامه نویس برای یک عکس فضای مربعی شکل در نظر گرفته (مثلا ۲۰۰*۲۰۰) ولی ادمین عکس مستطیلی (مثلا ۳۰۰*۱۰۰) آپلود میکنه. پس خیلی مهمه که تصاویری که برای سایتمون تهیه می کنیم با فضای در نظر گرفته شده برای اونا متناسب باشن.

به هر حال ما هر چقدر هم سعی کنیم تصاویر سایتمون رو با فضای در نظر گرفته برای اون متناسب کنیم بالاخره ممکنه گاهی اوقات عکسمون خیلی دقیق نشه و یکم طول یا عرضش کشیده بشه که باعث شه عکسمون زشت ، تار یا بی کیفیت بشه؛ برای همین راهکار زیر رو به شما توصیه میکنیم :

متناسب کردن عکس با فضا و حل مشکل کشیده شدن تصاویر در css :

در خیلی مواقع برنامه نویس ها به کمک CSS عکس رو مجبور می کنن که طول و عرض ۱۰۰% بگیره که این عمر می تونه باعث ایجاد بی کیفیتی یا تار شدن عکس بشه. برای همین بهتره شما کدهای css اون تگ img رو پیدا کنید و بهش استایل های مقابل رو بدید تا این مشکل حل بشه :


.csspark_imag {

   width:auto;

   height:auto;

   max-width:100%;

   max-height:100%;

}

توضیح : ما وقتی به عکس width یا height را auto می دیم یعنی اینکه طول و عرض واقعی خودش رو نشون بشه. حالا اگر طول و عرضش از باکس یا فضایی که واسش در نظر گرفتیم بیشتر باشه حسابی کارمون رو خراب میکنه و کل سایت بهم میریزه! واسه اینکه ازین مورد جلوگیری کنیم یه max-width:100% و max-height:100% هم بهش می دیم که عرض و طولش از باکسی که واسش در نظر گرفتیم بیشتر نشه.

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

در صورتی که به آموزش html css و یا آموزش jquery و یا آموزش bootstrap علاقه دارید میتونید از آموزش های پروژه محور و کاربردی سی اس اس پارک استفاده کنید که ضمانت بازگشت وجه هم داره.



  • مشکل کشیده شدن تصاویر در css
    نام نویسنده : امیرمسعود طالاری
  • مشکل کشیده شدن تصاویر در css
    نام نویسنده : رضا ابولحسن زاده
  • مشکل کشیده شدن تصاویر در css
    نام نویسنده : رضا ابولحسن زاده
  • مشکل کشیده شدن تصاویر در css
    نام نویسنده : رضا ابولحسن زاده

درباره نویسنده : برنامه نویس وب و کارشناسی ارشد رشته نرم افزار

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *