] यह CSS तकनीकों का उपयोग करके प्राप्त किया जा सकता है। निम्न CSS कोड यह दर्शाता है कि इसे कैसे प्राप्त किया जाए:

शरीर { ऊंचाई: 100VH; मार्जिन: 0; प्रदर्शन: फ्लेक्स; औचित्य-सामग्री: केंद्र; संरेखित-आइटम: केंद्र; पृष्ठभूमि: ग्रे; } ।अवस्था { --आर: 960 /540; // वांछित पहलू अनुपात (चौड़ाई / ऊंचाई) को परिभाषित करें पहलू-अनुपात: var (-r); // पहलू अनुपात निर्धारित करें चौड़ाई: न्यूनतम (90%, मिनट (960px, 90VH*(var (-r)))); // अनुपात को संरक्षित करते समय अधिकतम चौड़ाई और ऊंचाई निर्धारित करें प्रदर्शन: फ्लेक्स; औचित्य-सामग्री: केंद्र; संरेखित-आइटम: केंद्र; पृष्ठभूमि: रैखिक-ग्रेडिएंट (30 डीईजी, लाल 50%, पारदर्शी 50%), // संरक्षित पहलू अनुपात की कल्पना करने के लिए एक ढाल जोड़ें चॉकलेट; }

स्पष्टीकरण:

निर्दिष्ट बाधाओं के भीतर:

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