একজন ওয়েব ডেভেলপার হিসাবে, আপনি প্রায়ই HTML উপাদানগুলির সাথে কাজ করার ক্ষেত্রে নিজেকে দ্বিধাগ্রস্ত করতে পারেন যেগুলি - img উপাদানের বিপরীতে, উদাহরণস্বরূপ - এর একটি নির্দিষ্ট আকার বা একটি নির্দিষ্ট আকৃতির অনুপাত নেই৷ প্রায়শই আপনি নিশ্চিত করতে চান যে এই বস্তুগুলি প্রতিক্রিয়াশীলভাবে আচরণ করে, তবে প্রস্থ এবং উচ্চতার মধ্যে অনুপাত বজায় রাখা হয়। ডিফল্টরূপে, CSS এখানে একটি স্বজ্ঞাত সমাধান অফার করে না। কিন্তু উল্লম্ব প্যাডিং সম্পত্তির সাহায্যে আপনি আপনার লক্ষ্য অর্জন করতে পারেন।
বর্গাকার প্রবন্ধ চিত্রগুলির দৈনন্দিন উদাহরণ নেওয়া যাক, যেগুলির গ্রাফিক্স অগত্যা বর্গাকার নয়, তবে যেগুলিকে আমরা অতিরিক্ত প্রচেষ্টা ছাড়াই 1:1 এর অনুপাতের সাথে প্রদর্শন করতে চাই এবং সর্বোপরি, বিকৃতি ছাড়াই, যার ফলে তাদের প্রস্থ (এবং উচ্চতাও) প্রতিক্রিয়াশীলভাবে পরিবর্তিত হওয়া উচিত। নিম্নলিখিত কোডের সাহায্যে কোন অতিরিক্ত মার্কআপ ছাড়াই CSS ব্যবহার করে এটি করা খুব সহজ:
1bc3a80de3db90cdf0535541236d95f2
ফলাফল সহ:
কিন্তু কেন এই কাজ করে এবং কিভাবে অন্যান্য অনুপাত তৈরি করা যেতে পারে? এর চাবিকাঠি প্যাডিং প্রপার্টির মধ্যে রয়েছে, যা - শতাংশের মানগুলিতে নির্দিষ্ট করা হয়েছে - সর্বদা প্রস্থ সম্পত্তির (যেমন মূল উপাদানের প্রস্থ) হিসাবে একই মৌলিক মানের উপর ভিত্তি করে থাকে। এটি প্যাডিং-বাম এবং প্যাডিং-ডান-এর জন্য স্পষ্ট, প্যাডিং-টপ এবং প্যাডিং-নিচের জন্য আশ্চর্যজনক, কিন্তু এই ক্ষেত্রে খুব সহায়ক।
আপনি যদি 16: 9 এর একটি অনুপাত চান, উদাহরণস্বরূপ, আপনি মানগুলির প্রস্থ: 100%; প্যাডিং-নীচে: 56.25%; বেছে নিন। স্বর্ণের অনুপাতটিকে অ্যাকাউন্টে গ্রহণ করে এমন একটি অনুপাতের প্রস্থ: 100%; প্যাডিং-নীচে: 61.81%; উপলব্ধিযোগ্য।
ক্যালকের সাহায্যে আপনি সরাসরি অনুপাতটি নির্দিষ্ট করতে পারেন, উদাহরণস্বরূপ 16: 9 প্যাডিং-ডাউন সহ: ক্যালক (1 / (16/9) * 100%)। যদি উপাদানটিতে আরও, নেস্টেড উপাদান থাকে তবে সন্তানের উপাদানটি পিতামণ্ডলের উপাদানগুলির প্যাডিংয়ের জন্য ক্ষতিপূরণ দেওয়ার জন্য একেবারে অবস্থান করে:
1bc3a80de3db90cdf0535541236d95f2
এই নিম্নলিখিত ফলাফল বাড়ে: