কিভাবে ফ্লেক্সবক্সের সাহায্যে ইমেজ স্ট্রেচিং প্রতিরোধ করা যায়

সিএসএস-এর ফ্লেক্সবক্সকে কীভাবে আপনার ছবি অনুভূমিকভাবে প্রসারিত করা থেকে আটকাতে হয় তা জানুন।

ফ্লেক্সবক্সের একটি অদ্ভুত ডিফল্ট আচরণ রয়েছে যেখানে চিত্রগুলি তার মূল কন্টেইনারের সম্পূর্ণ প্রস্থে অনুভূমিকভাবে প্রসারিত হয়। সুতরাং আপনার যদি flex-direction: column সহ একটি অভিভাবক উপাদান (ফ্লেক্স কন্টেইনার) থাকে এবং একটি শিশু উপাদান (ফ্লেক্স আইটেম) যা একটি চিত্র, তারপর ছবির প্রাকৃতিক উচ্চতা রক্ষণাবেক্ষণ করা হয় যখন প্রস্থটি প্যারেন্ট কন্টেইনারের মতো প্রসারিত হয়।

আপনার ব্রাউজারের ডিফল্ট CSS স্টাইলশীট (ইউজার এজেন্ট স্টাইলশীট) এর উপর নির্ভর করে এই আচরণটি অসঙ্গত।

সৌভাগ্যবশত, সমাধান সহজ. আপনাকে শুধু আপনার ছবি/ফ্লেক্স আইটেমের align-self প্রতিস্থাপন করতে হবে সম্পত্তির ডিফল্ট stretch অন্য মানের সাথে মান।

stretch এর পরিবর্তে আপনি center ব্যবহার করতে পারেন , যা ইমেজ স্ট্রেচিং মুছে ফেলবে এবং আপনার ইমেজটিকে এর মূল কন্টেইনারের মাঝখানে উল্লম্বভাবে সারিবদ্ধ করবে।

img {
    align-self: center;
}

উদাহরণ

নীচের CSS উদাহরণটি দেখুন যেখানে আমাদের ভিতরে 1 জন অভিভাবক (ফ্লেক্স কন্টেইনার) এবং 2টি শিশু চিত্র উপাদান (ফ্লেক্স আইটেম) রয়েছে।

• প্রথম ছবির উপাদানটিতে ব্রাউজার ডিফল্ট align-self: stretch যা আকৃতির অনুপাত নষ্ট করে।
• দ্বিতীয় ইমেজ এলিমেন্টে, আমি .self-center নামে একটি ইউটিলিটি ক্লাস যোগ করেছি , align-self: center সহ ঘোষণা যা স্ট্রেচিং অপসারণ করে:

https://codepen.io/StrengthandFreedom/pen/qBBoMOX

গৌরবময়, সমস্যা সমাধান!

দ্রষ্টব্য:আপনি topও ব্যবহার করতে পারেন , উল্লম্বভাবে আপনার চিত্রটিকে এর মূল কন্টেইনারের শীর্ষে সারিবদ্ধ করতে৷

img {
    align-self: top; 
}

উভয় পদ্ধতিই আপনার ছবি থেকে প্রসারিত মান সরিয়ে দেবে, কিন্তু আপনার top ব্যবহার করা উচিত কিনা অথবা center আপনি আপনার ছবি দিয়ে কি করতে চান তার উপর নির্ভর করে৷

জেনে রাখা ভালো

ফ্লেক্স আইটেমগুলির একটি ডিফল্ট align-self আছে stretch এর মান . তাই আপনার ফ্লেক্স-আইটেম (শিশু উপাদান) একটি চিত্র বা অন্য HTML উপাদান হোক না কেন, এটি ডিফল্টরূপে অনুভূমিকভাবে প্রসারিত হয়৷