जुलाई 2013 से यह लेख एक तत्व पहलू अनुपात को बनाए रखने के लिए प्यूसीडो तत्वों का उपयोग करने की एक विधि का वर्णन करता है, यहां तक कि तराजू भी।
यहाँ एक सास मिक्सिन है जो गणित को थोड़ा सरल करता है।
@mixin aspect-ratio($width, $height) ( position: relative; &:before ( display: block; content: ""; width: 100%; padding-top: ($height / $width) * 100%; ) > .content ( position: absolute; top: 0; left: 0; right: 0; bottom: 0; ) )मिश्रक मानता है कि आप अपने प्रारंभिक ब्लॉक के अंदर सामग्री के वर्ग के साथ एक तत्व का चयन कर रहे हैं। इस कदर:
insert content here this will maintain a 16:9 aspect ratio मिश्रण का उपयोग करना उतना ही आसान है:
.sixteen-nine ( @include aspect-ratio(16, 9); )परिणाम:
.sixteen-nine ( position: relative; ) .sixteen-nine:before ( display: block; content: ""; width: 100%; padding-top: 56.25%; ) .sixteen-nine > .content ( position: absolute; top: 0; left: 0; right: 0; bottom: 0; )डेमो
यहां एक डेमो है जो उपरोक्त कोड को कार्रवाई में दिखा रहा है। एलिमेंट को निर्धारित पहलू अनुपात को बनाए रखने के लिए एनीमेशन जोड़ा जाता है क्योंकि यह आकार बदलता है।
कोडपेन पर शॉन डेम्पसे (@seanseansean) द्वारा पेन मेन्ट एस्पेक्ट रेशियो डेमो देखें।
इसके लिए सीन डेम्पसी (@thatseandempsey) को धन्यवाद!