व्यूपोर्ट में पहलू अनुपात संरक्षण सुनिश्चित करना

वेब डिज़ाइन में, परिवर्तनीय व्यूपोर्ट आयामों को अनुकूलित करते समय तत्वों के पहलू अनुपात को बनाए रखना महत्वपूर्ण है। यह विभिन्न स्क्रीन आकारों और ओरिएंटेशन में एकरूपता सुनिश्चित करता है। वर्ग तत्व से निपटने के दौरान विशेष रूप से इस संरक्षण को प्राप्त करने के लिए, निम्नलिखित सीएसएस दृष्टिकोण लागू किया जा सकता है:

पहलू-अनुपात संपत्ति का उपयोग

2022 तक, पहलू -अनुपात संपत्ति तत्वों के पहलू अनुपात को नियंत्रित करने के लिए एक मजबूत समाधान प्रदान करती है। वांछित चौड़ाई-से-ऊंचाई अनुपात निर्दिष्ट करके, यह संपत्ति निर्दिष्ट अनुपात को बनाए रखने के लिए तत्व के आकार को अनुकूलित करती है। महत्वपूर्ण रूप से, आकार अनुकूलन व्यूपोर्ट के सबसे छोटे आयाम द्वारा बाधित होता है, जो लैंडस्केप और पोर्ट्रेट ओरिएंटेशन दोनों को गतिशील रूप से समायोजित करने की आवश्यकता को पूरा करता है।

उदाहरण कार्यान्वयन

प्रदर्शित करने के लिए पहलू-अनुपात संपत्ति की कार्यक्षमता, निम्नलिखित कोड का उपयोग किया जा सकता है:

Aspect ratio 1:1
Aspect ratio 1:19

.ar-1-1 {
  aspect-ratio: 1 / 1;
  background: orange;
}

.ar-1-19 {
  aspect-ratio: 16 / 9;
  background: pink;
}

div {
  max-width: 100vw;
  max-height: 100vh;
  margin-bottom: 5vh;
}

इस उदाहरण में, अलग-अलग पहलू अनुपात (1:1 और 16:9) वाले दो प्रभाग बनाए गए हैं। पहलू-अनुपात संपत्ति यह सुनिश्चित करती है कि डिवाइस के अभिविन्यास की परवाह किए बिना, ये divs व्यूपोर्ट के भीतर अपना वांछित आकार और आकार बनाए रखें। इसके अतिरिक्त, उनके आयामों को व्यूपोर्ट के सबसे छोटे आयाम में फिट करने के लिए समायोजित किया जाता है, जिससे यह सुनिश्चित होता है कि चौकोर आकार संरक्षित है।