এলিমেন্টের প্যাডিং শতাংশে নির্দিষ্ট করে আমরা এর আспек্ট রেশিও বজায় রাখতে পারি।
এজন্য CSS padding প্রোপার্টি ব্যবহার করুন −
padding-bottom একটি এলিমেন্টের নিচের প্যাডিং নির্দিষ্ট করে।
padding-top একটি এলিমেন্টের উপরের প্যাডিং নির্দিষ্ট করে।
padding-left একটি এলিমেন্টের বাম প্যাডিং নির্দিষ্ট করে।
padding-right একটি এলিমেন্টের ডান প্যাডিং নির্দিষ্ট করে।
padding উপরের প্রোপার্টিগুলোর শর্টহ্যান্ড হিসেবে কাজ করে।
উদাহরণ
নিচের উদাহরণগুলো CSS padding প্রোপার্টি ব্যবহার করে আспек্ট রেশিও বজায় রাখতে দেখানো হয়েছে।
<!DOCTYPE html> <html> <head> <style> #demo { padding-top: 100%; box-shadow: 0 0 24px steelblue; position: relative; width: 100%; } div > div { margin: 10px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; text-align: center; } </style> </head> <body> <p>Watch the below div</p> <div id="demo"> <div>Fun Ratio!</div> </div> </body> </html>
আউটপুট
এটি নিচের ফলাফল দেবে −
উইন্ডো রিসাইজ করার পরেও আспек্ট রেশিও 1:1 থাকে।
উদাহরণ
<!DOCTYPE html> <html> <head> <style> div { margin: 10%; padding-top: 56.25%; height: 0px; position: relative; box-shadow: 0 0 0 20px antiquewhite; } iframe { position: absolute; top: 0; height: 100%; width: 100%; } </style> </head> <body> <div> <iframe src="https://www.youtube.com/embed/0cwk9UMLnWE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-inpicture" allowfullscreen></iframe> </div> </body> </html>
আউটপুট
এটি নিচের ফলাফল দেবে −
