ইমেজ স্ট্রেচ সমস্যার সমাধান
আমরা ইমেজ নিয়ে একটা সমস্যা প্রায়ই ফেস করি যে, কোথাও ইমেজ ইউস করতে গেলে যখন আমরা ইমেজের কোনো হাইট দিয়ে দেই তখন ইমেজগুলো চ্যাপ্টা হয়ে যায়.
এটার একটা সিম্পল সমাধান হলো ফটোশপ বা অন্য কোনো টুল দিয়ে ইমেজগুলো সমান মাপে ক্রপ করে নেওয়া।
কিন্তু প্র্যাকটিক্যাল কেসে এইটা তেমন কোনো কাজের না। উদাহরণ হিসেবে ধরুন আপনি একটা ব্লগ সাইট বানালেন যেখানে যে কেউ পোস্ট করতে পারে। এখন পোস্টের থাম্বনেইল ইমেজের আপনি width, height দিয়ে রাখলেন 400*300। এখন সবাই যে ছবি ক্রপ করে এই সাইজে আপলোড করবে তার তো কোনো গ্যারান্টি নেই। তো এখন কেউ যদি এই সেম রেশিও ছাড়া ইমেজ আপলোড করে থাম্বনেইল এর জন্য তাহলেই ইমেজ চ্যাপ্টা হয়ে যাবে।
কিন্তু সুখবর হলো সিএসএস এ একটি সুন্দর প্রোপার্টি আছে যা দিয়ে খুব সহজেই এই সমস্যার সমাধান করা যায়। প্রোপার্টির নাম হলো object-fit।
object-fit ইউস করার জন্য প্রথমেই আপনার ইমেজের একটা নির্দিষ্ট height, width ডিফাইন করে দেওয়া লাগবে।
এর যে ২টি ভ্যালু আপনাদের বেশি কাজে লাগবে তা হলো contain আর cover। (ব্যাকগ্রাউন্ড ইমেজ সাইজে contain/cover যেভাবে কাজ করে এখানেও সেভাবেই কাজ করে )
cover: কভার ইউস করলে ডিফাইন করে দেওয়া height/width এর পুরোটা জায়গা জুড়ে ইমেজ শো করতে যতখানি জুম হওয়া দরকার হয়ে ইমেজ শো করবে।
contain: কনটেইন ইউস করলে ডিফাইন করে দেওয়া height/width এর মধ্যেই পুরো ইমেজটা শো করতে ইমেজ যতখানি জুম আউট হয়ে শো করানো দরকার হয়ে ইমেজ শো করবে। স্ক্রীণশট ৫ এ দেখেন আমরা height ২৫০ পিক্সেল আর width ১০০% দিয়ে রাখলেও ইমেজগুলো পুরোটা শো করতে আশে পাশে যতটা জায়গা ফাকা রাখা লাগতেছে তা রেখে দিচ্ছে।
এখন আরেকটা ব্যাপার হলো আমরা cover/contain ইউস করার পর ইমেজ জুম ইন/আউট হয়ে সেন্টারে শো করতেছে সব সময়। আমরা যদি চাই ইমেজটার পজিশন চেঞ্জ করতে তাহলে কি করবো?
সেটারও সমাধান আছে। আমরা চাইলেই object-position ইউস করে এই কাজটা করতে পারি।
আমি এখানে অল্প করে শুধু প্রোপার্টিগুলো সম্পর্কে ধারণা দিলাম। আপনার গুগল করে বা ইউটিউব থেকে দেখে আরো কিছু জানতে পারেন। আর আমি ২ টা লিংক এড করে দিচ্ছি। সেগুলোও চেক করতে পারেন।