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