CSS Flexbox-এ একটি ডিফল্ট বিহেভিয়র রয়েছে যেখানে ইমেজ হরিজন্টালি প্যারেন্ট কন্টেইনারের ফুল প্রস্থে স্ট্রেচ হয়ে যায়। যদি প্যারেন্টে flex-direction: column থাকে এবং চাইল্ড ইমেজ থাকে, তবে ইমেজের ন্যাচারাল হাইট বজায় থাকে কিন্তু প্রস্থ ফ্যালে যাবে।
এই বিহেভিয়র ব্রাউজারের User Agent Stylesheet-এ নির্ভর করে ইনকনসিস্টেন্ট হতে পারে।
সমাধান: align-self: center (বা top)
ইমেজ/ফ্লেক্স আইটেমের ডিফল্ট align-self: stretch কে center দিয়ে রিপ্লেস করুন:
img { align-self: center; }এটি স্ট্রেচিং রিমুভ করে এবং ইমেজকে প্যারেন্ট কন্টেইনারের মাঝপথে ভার্টিক্যালি অ্যালাইন করে।
উদাহরণ (CodePen)
১টি প্যারেন্ট (ফ্লেক্স কন্টেইনার) এবং ২টি চাইল্ড ইমেজ (ফ্লেক্স আইটেম):
- প্রথম ইমেজ: ডিফল্ট
align-self: stretch→ এসপেক্ট রেশিও রুইন - দ্বিতীয় ইমেজ:
.self-center { align-self: center }→ স্ট্রেচিং নেই
https://codepen.io/StrengthandFreedom/pen/qBBoMOX
গুড টু নো
ফ্লেক্স আইটেমের ডিফল্ট align-self হলো stretch। ইমেজ নাকি অন্য যেকোনো HTML এলিমেন্ট—ডিফল্টভাবে হরিজন্টালি স্ট্রেচ হবে। align-self: top দিয়ে টপে অ্যালাইন করাও যায়। কোনটি ব্যবহার করবেন সেটা আপনার ডিজাইন উদ্দেশ্যের ওপর নির্ভর করে।
