ऊंचाई

Question

मैं करने के लिए है विंडो आकार परिवर्तन पर ऊंचाई के संबंध में एक div के पक्ष अनुपात बनाए रखने के अनुसार एक div के पक्ष अनुपात को बनाए रखें।

मैं padding-bottom; या padding-top; का उपयोग करके चौड़ाई (एक्स%) के संबंध में पहलू अनुपात (x: y) को बनाए रख सकता हूं।

तो सादृश्य से, मैं padding-left;

.wrapper{ 
    height: Y%, 
    position: relative; 
} 

.wrapper:after{ 
    padding-left: Y(x/y)%; 
    display:block; 
} 

उपयोग करने की कोशिश लेकिन padding-left का प्रतिशत मूल्य आवरण के लिए किसी भी चौड़ाई नहीं देता है।

कैसे मुझे लगता है कि div के पक्ष अनुपात इसकी ऊंचाई के अनुसार बनाए रख सकते हैं?

Answer 1

% पैडिंग/मार्जिन के रूप में contrainer की चौड़ाई के अनुसार गणना कर रहे हैं, तो आप "पैडिंग तकनीक" का उपयोग नहीं कर सकते हैं ऊंचाई के अनुसार पहलू अनुपात maitain करने के लिए।

एक सीएसएस समाधान के लिए, आप vh इकाइयों का उपयोग करना होगा:

VH: 1/व्यूपोर्ट की ऊंचाई की 100 वीं। 1 पहलू अनुपात:

Source

ब्राउज़र समर्थन के लिए एक 1 के लिए canIuse

---

उदाहरण देखने

DEMO

सीएसएस

div{ 
    width: 50vh; 
    height: 50vh; 
}