image ratioওয়েব পেজে আমরা সবাই কম বেশি ইমেজ ব্যবহার করি। যারা ডিজাইন নিয়ে সচেতন তারা সবসময় ইমেজ রেসিয় ঠিক রাখে যাতে ইমেজ স্ক্যালিং হয়ে খারাপ না দেখায়। এখন ধরা যাক আপনি  যে ইমেজটা ব্যবহার করবেন সেটা অনেক বড় ইমেজ। এখন আপনাকে ইমেজটা ছোট করে দেখাতে হবে। তাহলে আপনি কি করবেন? আপনি কোন গ্রাফিক্স টুল ব্যবহার করে ইমেজটা ছোট করতে পারেন অথবা মূল ইমেজটাকেই উচ্চতা এবং বিস্তার দিয়ে ঠিকমত ব্যবহার করতে পারেন। কিন্তু আপনাকে অবশ্যই খেয়াল রাখতে হবে যাতে ভুল রেসিওর কারনে ইমেজটা বাজে স্ক্যালিং হয়ে খারাপ না দেখায়।

নিচের ইমেজটা খেয়াল করুন:

এখন আমি যদি এই ইমেজের রেসিও ঠিক না রেখে ব্যবহার করি তাহলে এটা দেখতে এমনও হতে পারে:

উপোরক্ত ইমেজে width=100 এবং height=100 ব্যবহার করা হয়েছে। কিন্তু রেসিও ঠিক রাখলে এটার width=100 এবং height=128 হত।

রেসিও ঠিক রাখার পর এখন ইমেজটা দেখেন:

রেসিও বের করার একটা সহজ সূত্র আছে তা হল:

NewHeight = GivenWidth * (OriginalHeight / OriginalWidth)

বাংলায়

নতুন উচ্চতা = আকাঙ্কিত বিস্তার * (মূল উচ্চতা / মূল বিস্তার)

সুতরাং আপনার ইমেজের উচ্চতা এবং বিস্তার যদি ৩০০ ও ২৩৪  হয় এবং আপনি যদি চান আপনার ইমেজের নতুন বিস্তার ১০০ হয় তাহলে এর উচ্চতা হওয়া উচিত:

নতুন উচ্চতা = ১০০ * (৩০০ / ২৩৪)
নতুন উচ্চতা = ১০০ * ১.২৮
নতুন উচ্চতা = ১২৮

পিএইচপি ল্যাংগুয়েজ ব্যবহার করলে আপনার কোড হবে:

//first get original widht, height of the image
list($width, $height, $type, $attr) = getimagesize($photourl);
$mWidth  =   100;
$mHeight =   $mWidth * ($height / $width);

এইচটিএমএল কোড হবে:

     <img src="<?=$photourl?>" alt="photo" width="<?=$mWidth?>" height="<?=$mHeight?>" />

🙂