किसी तत्व की पैडिंग को प्रतिशत में निर्दिष्ट करके, हम उसका पहलू अनुपात बनाए रख सकते हैं।
इसके लिए CSS पैडिंग प्रॉपर्टी का इस्तेमाल करें-
-
पैडिंग-बॉटम किसी तत्व के निचले पैडिंग को निर्दिष्ट करता है।
-
पैडिंग-टॉप किसी तत्व के शीर्ष पैडिंग को निर्दिष्ट करता है।
-
पैडिंग-बाएं किसी तत्व के बाएँ पैडिंग को निर्दिष्ट करता है।
-
पैडिंग-राइट किसी तत्व की सही पैडिंग निर्दिष्ट करता है।
-
पैडिंग पूर्ववर्ती संपत्तियों के लिए आशुलिपि के रूप में कार्य करता है।
उदाहरण
निम्नलिखित उदाहरण पहलू अनुपात को बनाए रखने के लिए CSS पैडिंग गुण को दर्शाते हैं।
<!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> आउटपुट
यह निम्नलिखित परिणाम देगा -
