প্যাডিং-টপ ট্রিক ব্যবহার করে এলিমেন্টের প্রস্থ অনুযায়ী উচ্চতা স্বয়ংক্রিয়ভাবে রেখে ৪:৩ বা ১৬:৯ আস্পেক্ট রেশিও বজায় রাখা যায়।
উদাহরণ: ৪:৩ আস্পেক্ট রেশিও
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.aspectContainer {
background-color: rgb(191, 66, 216);
position: relative;
width: 100%;
padding-top: 75%; /* 4:3 = 75% */
}
.aspectText {
position: absolute;
text-align: center;
top: 0;
left: 0;
bottom: 0;
right: 0;
font-size: 20px;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<h1>আস্পেক্ট রেশিও উদাহরণ</h1>
<div class="aspectContainer">
<div class="aspectText">৪:৩ আস্পেক্ট রেশিও</div>
</div>
<h2>উইন্ডো রিসাইজ করুন ৪:৩ অনুপাত বজায় থাকা দেখতে</h2>
</body>
</html>
কোড ব্যাখ্যা
- padding-top: 75%: ৪:৩ অনুপাত = ৩/৪ = ০.৭৫ = ৭৫%।
- position: relative (কন্টেইনার) + absolute (চাইল্ড): কন্টেন্টকে কন্টেইনারের উপর ভেটিক্যালি ও হোরিজন্টালি কেন্দ্রে রাখে।
আধুনিক পদ্ধতি
CSS `aspect-ratio` প্রোপার্টি (সাপোর্ট: Chrome 88+, Firefox 89+, Safari 15+) ব্যবহার করলে আরও সহজ: `aspect-ratio: 4 / 3;`।
