الگوریتم تغییر سایز عکس

الگوریتم تغییر سایز عکس و نکات اصلی این اصل

با سلام و عرض ادب خدمت شما عزیزان محترم و گرامی .

موضوعی که امروز میخوام در موردش براتون صحبت کنم چند ماه پیش یعنی تقریبا اوایل آشناییم با آرش اتفاق افتاد .

موضوع این بود که قرار بود یک  پلاگین وردپرسی برای تست پرده ایجاد کنیم که مشتری ابتدا عکسی خود را آپلود میکرد و عکس

پرده را روی پنجره تست میکرد .

میتونید برای دیدن پلاگین هم به سایت دیدِدکور مراجعه کنید .

مشکل اینجا بود که وقتی به عکس بنابر نیاز position:absolute میدادیم دسترسی روی عرض و ارتفاع نداشتیم .

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

 

در این مواقع چندتا راه حل وجود داره :

۱- div والد دارای ارتفاع مناسب باشد :

 

وقتی div یا عنصر والد که دارای position:relative دارای ارتفاعی معین باشد.

مثلا ۱۰۰px شما میتوانید براحتی تصویر خود را داخل آن فیکس کنید .

مثلا با دادن کدهای زیر اندازه عکس شما ۱۰۰px * 100px میشود .

div{
     position:relative;
     width:100px;
     height:100px;

}

div img{
    position:absolute;
    right:0;
    left:0;
    top:0;
    bottom:0;
}

۲-دادن عرض و ارتفاع به خود عکس

 

در این حالت میتوانید بجای دادن عرض و ارتفاع به عنصر والد ، این مقدار را داخل استایل خود عکس قرار دهید .

مثلا مثل کد زیر :

div img{
      position:absolute;
      right:0;
      left:auto;
      top:0;
      width:100px;
      height:100px;
}

 

مشکلات عدیده !!

 

هر وقت میگم مشکلات عدیده یاد شب خواستگاریم میوفتم که پدر زنم از این کلمه استفاده کرد و من داشتم کارد میوه خوری را جای

خیار گاز میزدم چون بنظرم کلمه خنده داری بود.

بگذریم مشکلی که براتون ایجاد میشه وقتیه که بخواهید داخل یک div با پوزیشن absolute یک  عکس قرار دهید و ارتفاع عکس از

یک حد تجاوز نکند و اگر عرض زیاد بود .

تغییر سایز عکس 2 الگوریتم تغییر سایز عکس

 

یعنی عکس مستطیل افقی بود  ارتفاع عکس کوچک شود و راحت تر بگم در هر شرایطی سایز عکس مناسب باشه .

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

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

علی توی فلش ماشینم یه عکس داشتم اونو اپلود کردم و بعد از اپلود رفتم توی هاست و عکس را سیو کردم چرا عکس را

بعد آپلود ۳ پیکسل عرضش بیشتر میشه و عکس یه خورده کشیده بنظر میرسه .

خلاصه روانی شده بودم هر روز چندتا عکس قبل از اپلود و بعد از اپلود برام ارسال میکرد و منم

هی سرچ کن و دنبال راه حل بگرد .

جدا دم گوگل گرم که با این جستجوهای من با ۴ تا کلمه دست و پاشکسته انگلیسی بازم جواب منطقی پیدا میکنه .

خب جزوه هاتونو باز کنید تا رابطه ریاضی نسبت طول و عرض را بگم :

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

var img = document.getElementById('imageID');
var width = img.naturalWidth;
var height = img.naturalHeight;

سپس باید عدد طلایی خود را بدست آوریم برای اینکار اینگونه عمل میکنیم

var ratio = height/width

ما در این مثال سایز عکس را میخواهیم ۲۰۰ پیکسل قرار دهیم حال با هر ارتفاعی

var imgwidth = 200;
var imgheight = ratio * 200;

حال اگر خواستار این هستید که ارتفاع برابر ۲۰۰ باشد حال با هر عرضی

var imgheight = 200;
var imgwidht = 200 / ratio;

امیدوارم روزی بدردتان بخورد . بدرود

Add a comment

*Please complete all fields correctly

مقالات مرتبط

No Image
Posted by ادمین | ۱۳۹۷-۰۶-۱۸
آموزش سریع HTML – قسمت دوم
سلام من علی هستم با قسمت دوم آموزش HTML و در این قسمت میخواهم در مورد تگ های مربوط به متن و لینک ها صحبت کنم . چون عمده مطالب...
HTML3 آموزش HTML
Posted by ادمین | ۱۳۹۷-۰۶-۱۸
آموزش سریع HTML – قسمت اول
HTML سلام من علی با آموزش html در خدمت شما هستم و سعی میکنم قسمت های کاربردی html را براتون توضیح بدهم . پیش از شروع باید بدانید که html...
Website Wireframe Sketch And Programming Code On Digital Tablet طراحی وب
Posted by ادمین | ۱۳۹۷-۰۶-۱۶
آموزش طراحی وب قسمت صفر
طراحی وب و نکاتی مهم در این مورد طراحی وب را یاد میگیرید پس حتما این مقاله را مطالعه کنید. با سلام و عرض ادب و احترام ، من علی...