CSS के साथ div के पहलू अनुपात को बनाए रखें

Question

मैं बनाना चाहता हूँ divकि खिड़की की चौड़ाई में परिवर्तन के रूप में इसकी चौड़ाई / ऊंचाई बदल सकते हैं।

क्या कोई सीएसएस 3 नियम हैं जो इसकी पहलू अनुपात को बनाए रखते हुए ऊंचाई को चौड़ाई के अनुसार बदलने की अनुमति देगा ?

मुझे पता है कि मैं इसे जावास्क्रिप्ट के माध्यम से कर सकता हूं, लेकिन मैं केवल CSS का उपयोग करना पसंद करूंगा।

Comments

मैंने अपने सीएसएस-ट्रिक्स लेख के बारे में अलग-अलग दृष्टिकोणों के बारे में लिखा है जो कि संवेदनशील एनिमेशन को

— मापता है

मैं इस प्रश्नोत्तर में बहुत देर से आया हूं, लेकिन मुझे टिप्पणी करनी चाहिए। यद्यपि यह बहुत अनुशासित है और सभी के एसओ नियमों के भीतर प्रश्न के "केवल सीएसएस" मांग को पूरा करने के लिए अपना सर्वश्रेष्ठ प्रयास करने के लिए, यह काफी आश्चर्यजनक है कि पृष्ठ पर user007 कम जवाब द्वारा अपवाद के साथ , नहीं- एक ने स्पष्ट उल्लेख किया है: कोई भी विश्वसनीय सीएसएस-केवल समाधान मौजूद नहीं है, इस समस्या को जावास्क्रिप्ट की आवश्यकता है। इस पृष्ठ पर आने वाला एक नौसिखिया लाइटबल्ब के रवाना होने से पहले पेशेवरों / विपक्षों के एक सेट से बहुमूल्य समय बर्बाद कर सकता है: CSS-only नहीं करेगा।

— थियो डी ओर

मैंने एक छोटा उपकरण लिखा है जो पहलू अनुपात, एस्पारेट.आईओ का पूर्वावलोकन और गणना करना आसान बनाता है । यह उपयुक्त CSS / Sass / Less कोड भी बनाता है जिसे आप अपनी परियोजनाओं में कॉपी और पेस्ट कर सकते हैं। आशा है कि लोग इसे उपयोगी पाएंगे।

— रयान हेफनर

इस उदाहरण को देखें: w3schools.com/howto/howto_css_aspect_ratio.asp ..... जिसने मुझे काम दिया

— क्रिस्टियन एजुदेलो

यह प्रश्न चौड़ाई के आधार पर ऊंचाई निर्धारित करने के लिए है । यदि आपको इसके विपरीत की आवश्यकता है, तो ऊँचाई Via सीएसएस के आधार पर सेटिंग तत्व चौड़ाई की जाँच करें ।

— जॉन मेलोर

Answer 1

इसके लिए <div>प्रतिशत मान के साथ बस एक रैपर बनाएं padding-bottom:

div {
  width: 100%;
  padding-bottom: 75%;
  background: gold; /** <-- For the demo **/
}

/* demonstration purposed only : non-essential */
.demoWrapper {
  padding: 10px;
  background: white;
  box-sizing: border-box;
  resize: horizontal;
  border: 1px dashed;
  overflow: auto;
  max-width: 100%;
  height: calc(100vh - 16px);
}

<div class="demoWrapper">
  <div></div>
</div>

यह <div>अपने कंटेनर की चौड़ाई के 75% (4: 3 पहलू अनुपात) के बराबर ऊंचाई के साथ परिणाम देगा ।

यह इस तथ्य पर निर्भर करता है कि गद्दी के लिए:

प्रतिशत की गणना जनरेट बॉक्स के ब्लॉक की चौड़ाई के संबंध में की जाती है [...] (स्रोत: w3.org , जोर मेरा)

अन्य पहलू अनुपात और 100% चौड़ाई के लिए पैडिंग-बॉटम मान:

aspect ratio  | padding-bottom value
--------------|----------------------
    16:9      |       56.25%
    4:3       |       75%
    3:2       |       66.66%
    8:5       |       62.5%

---

Div में सामग्री रखने:

Div के पहलू अनुपात को बनाए रखने और इसकी सामग्री को फैलाने से रोकने के लिए, आपको एक पूरी तरह से तैनात बच्चे को जोड़ने और इसे आवरण के किनारों पर फैलाने की आवश्यकता है:

div.stretchy-wrapper {
  position: relative;
}

div.stretchy-wrapper > div {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

यहाँ एक डेमो और गहराई में एक और है डेमो

Comments

@schellmax, यह इसलिए है क्योंकि पैडिंग% की गणना वर्तमान तत्व की चौड़ाई के सापेक्ष की जाती है, जहां ऊंचाई% की गणना मूल तत्व की ऊंचाई के सापेक्ष की जाती है। इसके अलावा, निरपेक्ष पदों की गणना एक तत्व के बाहरी कंटेनर के सापेक्ष की जाती है, जिसमें पैडिंग क्षेत्र शामिल है। अधिक जानकारी के लिए Google "CSS बॉक्स मॉडल"

— Anson Kao

यह एक नेस्टेड फैशन में काम नहीं करता है। यह पहले स्तर पर काम करता है, लेकिन जब दिव्य पहलू अनुपात के अंदर एक ही काम करने की कोशिश करते हैं, तो पैडिंग-बॉटम प्रतिशत माता-पिता की चौड़ाई पर लागू होता है। यहाँ एक उदाहरण है जहाँ .stretchy-wra.onethird पैडिंग-तल का 25% वास्तव में मूल चौड़ाई का 25% है। क्या कोई इसे समझा सकता है?

— मिस्टरपकर 15

अत्यन्त अद्भुत। यह मुझे मार रहा है कि जब आप 100% ऊंचाई तय करना चाहते हैं तो यह तकनीक काम नहीं करेगी। @ मिस्टरपकर, तकनीक उसी संदर्भ के खिलाफ की जा रही चौड़ाई और पैडिंग गणना पर निर्भर करती है; आप अपने उदाहरण में 100% से कम चौड़ाई का उपयोग नहीं कर सकते।

— स्टेवेलुशर

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

— वेब_डिजाइनर

तथ्य यह है कि उन्होंने प्रदर्शित किया है कि यह काम मुझे यह समझाने के लिए पर्याप्त है कि यह एसओ पर देखा गया सबसे अच्छा जवाब है। मेरे आदमी को @beb_Designer चिल्लाओ

Answer 2

vw इकाइयों:

आप तत्व vwकी चौड़ाई और ऊंचाई दोनों के लिए इकाइयों का उपयोग कर सकते हैं । यह व्यूपोर्ट की चौड़ाई के आधार पर तत्व के पहलू अनुपात को संरक्षित करने की अनुमति देता है।

vw: व्यूपोर्ट की चौड़ाई का 1/100 वाँ भाग। [ एमडीएन ]

वैकल्पिक रूप से, आप भी उपयोग कर सकते हैं vhव्यूपोर्ट ऊंचाई के लिए, या भी vmin/ vmaxव्यूपोर्ट आयाम के कम / अधिक से अधिक (चर्चा उपयोग करने के लिए यहाँ )।

उदाहरण: 1: 1 पहलू अनुपात

div {
  width: 20vw;
  height: 20vw;
  background: gold;
}

<div></div>

अन्य पहलू अनुपात के लिए, आप तत्व की चौड़ाई के अनुसार ऊंचाई के लिए मूल्य की गणना करने के लिए निम्न तालिका का उपयोग कर सकते हैं:

aspect ratio  |  multiply width by
-----------------------------------
     1:1      |         1
     1:3      |         3
     4:3      |        0.75
    16:9      |       0.5625

उदाहरण: वर्ग विभाजन के 4x4 ग्रिड

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
div {
  width: 23vw;
  height: 23vw;
  margin: 0.5vw auto;
  background: gold;
}

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

यहाँ इस डेमो के साथ एक फिडेल है और यहाँ ऊर्ध्वाधर और क्षैतिज केंद्रित सामग्री के साथ चौकों की उत्तरदायी ग्रिड बनाने का एक समाधान है ।

---

Vh / vw इकाइयों के लिए ब्राउज़र समर्थन IE9 है + अधिक जानकारी के लिए canIuse देखें

Comments

यह स्वीकृत उत्तर होना चाहिए। शायद अभी नहीं, लेकिन भविष्य में। vw इकाइयाँ अब अधिकांश ब्राउज़रों में समर्थित हैं ।

— अगस्त

@vivekmaharajh दोनों ही तकनीकें अच्छी हैं, हर एक के पास अपने पेशेवरों और विपक्ष हैं। एक या दूसरे का उपयोग करना स्थिति पर बहुत निर्भर करता है।

— वेब-टिकी

@ वेब-टिकी, आप सही हैं। मैंने एक अंक में भाग लिया है - यह मानता है कि तत्व की चौड़ाई व्यूपोर्ट की चौड़ाई के आनुपातिक है, जो कि अगर 1) आपको तय चौड़ाई के गटर, या 2) जैसी चीजें मिली हैं, तो आप अधिकतम-चौड़ाई सेट कर सकते हैं। आपके कुछ तत्वों के लिए।

— विवेक महाराज

शायद यह सिर्फ क्रोम v47beta है, लेकिन जब मैंने div को सेट किया width:50%और height:50vwऊँचाई चौड़ाई की तुलना में थोड़ी अधिक है, तो बिल्कुल 1: 1 का अनुपात नहीं है। कोई विचार?

— 30

@ 10basetom यह एक सामान्य व्यवहार है। vw इकाइयों में स्क्रॉलबार चौड़ाई है जबकि% चौड़ाई नहीं है। ऊंचाई और चौड़ाई के बीच का अंतर स्क्रॉलबार के आकार पर निर्भर करेगा जो ब्राउज़र पर निर्भर करता है।

— वेब-टिक्की

Answer 3

मैंने CSS का उपयोग करके ऐसा करने का एक तरीका ढूंढ लिया है, लेकिन आपको सावधान रहना होगा क्योंकि यह आपकी अपनी वेब साइट के प्रवाह के आधार पर बदल सकता है। मैंने इसे अपनी वेब साइट के एक तरल पदार्थ की चौड़ाई वाले हिस्से में एक स्थिर पहलू अनुपात के साथ वीडियो एम्बेड करने के लिए किया है।

कहो कि आपके पास इस तरह एक एम्बेडेड वीडियो है:

<object>
     <param ... /><param ... />...
     <embed src="..." ...</embed>
</object>

आप तब एक "वीडियो" वर्ग के साथ एक div के अंदर यह सब रख सकते हैं। यह वीडियो क्लास संभवतः आपकी वेबसाइट में तरल तत्व होगा, जैसे कि, इसके पास कोई प्रत्यक्ष ऊंचाई की कमी नहीं है, लेकिन जब आप ब्राउज़र का आकार बदलते हैं तो यह वेब साइट के प्रवाह के अनुसार चौड़ाई में बदल जाएगा। यह वह तत्व होगा जिसे आप वीडियो के एक निश्चित पहलू अनुपात को बनाए रखते हुए अपने एम्बेडेड वीडियो को प्राप्त करने की कोशिश कर रहे हैं।

ऐसा करने के लिए, मैंने "वीडियो" वर्ग div के भीतर एम्बेडेड ऑब्जेक्ट से पहले एक छवि रखी।

!!! महत्वपूर्ण हिस्सा यह है कि छवि का सही पहलू अनुपात है जिसे आप बनाए रखना चाहते हैं। यह भी सुनिश्चित करें कि आपके लेआउट के आधार पर प्राप्त करने के लिए छवि का आकार AT LEAST जितना बड़ा है जितना आप वीडियो (या जो भी आप AR को बनाए रख रहे हैं) की अपेक्षा करते हैं। यह प्रतिशत-आकार बदलने पर छवि के रिज़ॉल्यूशन में किसी भी संभावित समस्या से बच जाएगा। उदाहरण के लिए, यदि आप 3: 2 के पहलू अनुपात को बनाए रखना चाहते हैं, तो बस 2px छवि द्वारा 3px का उपयोग न करें। यह कुछ परिस्थितियों में काम कर सकता है, लेकिन मैंने इसका परीक्षण नहीं किया है, और यह शायद बचने के लिए एक अच्छा विचार होगा।

आपके पास पहले से ही न्यूनतम चौड़ाई होनी चाहिए जैसे कि आपकी वेब साइट के द्रव तत्वों के लिए यह परिभाषित है। यदि ऐसा नहीं है, तो ऐसा करना एक अच्छा विचार है ताकि ब्राउज़र विंडो बहुत छोटा हो जाने पर तत्वों को काटकर या ओवरलैप होने से बचा जा सके। कुछ बिंदु पर स्क्रॉल बार रखना बेहतर है। वेब पेज की सबसे छोटी चौड़ाई लगभग 600 ~ 600px (किसी भी निश्चित चौड़ाई के कॉलम सहित) होनी चाहिए क्योंकि स्क्रीन रिज़ॉल्यूशन तब तक छोटे नहीं आते जब तक कि आप फोन-फ्रेंडली साइटों के साथ काम नहीं करते। !!!

मैं पूरी तरह से पारदर्शी पींग का उपयोग करता हूं, लेकिन मुझे नहीं लगता कि अगर आप इसे सही करते हैं तो यह समाप्त हो जाता है। ऐशे ही:

<div class="video">
     <img class="maintainaspectratio" src="maintainaspectratio.png" />
     <object>
          <param ... /><param ... />...
          <embed src="..." ...</embed>
     </object>
</div>

अब आपको निम्नलिखित के समान सीएसएस जोड़ने में सक्षम होना चाहिए:

div.video { ...; position: relative; }
div.video img.maintainaspectratio { width: 100%; }
div.video object { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
div.video embed {width: 100%; height: 100%; }

सुनिश्चित करें कि आप ऑब्जेक्ट के भीतर किसी भी स्पष्ट ऊँचाई या चौड़ाई की घोषणा को हटा दें और आमतौर पर कॉपी / पेस्ट किए गए एम्बेड कोड के साथ आने वाले टैग एम्बेड करें।

जिस तरह से यह काम करता है वह वीडियो क्लास तत्व की स्थिति गुणों और आपके इच्छित आइटम पर निर्भर करता है जो एक निश्चित पहलू अनुपात बनाए रखता है। यह उस तरह से लाभ उठाता है जब एक तत्व में आकार बदलने पर एक छवि अपना उचित पहलू अनुपात बनाए रखेगी। यह बताता है कि वीडियो क्लास एलिमेंट में जो कुछ भी है वह डायनेमिक इमेज द्वारा प्रदान की गई रियल एस्टेट का पूरा-पूरा फायदा उठाने के लिए उसकी चौड़ाई / ऊंचाई को बढ़ाकर 100% वीडियो क्लास एलिमेंट को इमेज द्वारा एडजस्ट करने के लिए है।

बहुत अच्छा, एह?

आपको इसे अपने स्वयं के डिज़ाइन के साथ काम करने के लिए इसके साथ थोड़ा खेलना होगा, लेकिन यह वास्तव में मेरे लिए आश्चर्यजनक रूप से अच्छी तरह से काम करता है। सामान्य अवधारणा है।

Answer 4

इलियट ने मुझे इस समाधान के लिए प्रेरित किया - धन्यवाद:

aspectratio.png मेरे मामले में 30x10 पिक्सेल में आपके पसंदीदा पहलू-अनुपात के आकार के साथ पूरी तरह से पारदर्शी पीएनजी-फाइल है।

एचटीएमएल

<div class="eyecatcher">
  <img src="/img/aspectratio.png"/>
</div>

CSS3

.eyecatcher img {
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../img/autoresized-picture.jpg);
}

कृपया ध्यान दें: background-size एक css3- सुविधा है जो आपके लक्ष्य-ब्राउज़र के साथ काम नहीं कर सकती है। आप इंटरऑपरेबिलिटी ( caniuse.com पर फ़े ) की जाँच कर सकते हैं ।

Answer 5

Web_Designer के उत्तर में जोड़ने के लिए, <div>इसकी ऊँचाई (पूरी तरह से नीचे की गद्दी से बनी) की चौड़ाई 75% होगी, जिसमें यह तत्व है । यहाँ एक अच्छा सारांश है: http://mattsnider.com/css-using-percent-for-margin-and-padding/ । मुझे यकीन नहीं है कि ऐसा क्यों होना चाहिए, लेकिन यह है कि यह कैसे है।

यदि आप चाहते हैं कि आपकी div 100% से अधिक की चौड़ाई वाली हो, तो आपको एक और रैपिंग div की आवश्यकता है, जिस पर चौड़ाई सेट करें:

div.ar-outer{
    width: 60%; /* container; whatever width you want */
    margin: 0 auto; /* centered if you like */
}
div.ar {
    width:100%; /* 100% of width of container */
    padding-bottom: 75%; /* 75% of width of container */
    position:relative;
}
div.ar-inner {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}

मैंने हाल ही में इलियट की छवि चाल के समान कुछ का उपयोग किया, जिससे मुझे डिवाइस रिज़ॉल्यूशन के आधार पर एक अलग लोगो फ़ाइल की सेवा करने के लिए सीएसएस मीडिया प्रश्नों का उपयोग करने की अनुमति मिली, लेकिन फिर भी अनुपातिक रूप से एक पैमाने पर <img>स्वाभाविक रूप से होता है (मैं पृष्ठभूमि छवि के रूप में लोगो को एक पारदर्शी। Png पर सेट करता हूं। सही पहलू अनुपात के साथ)। लेकिन Web_Designer का समाधान मुझे http अनुरोध को बचाएगा।

Comments

महान समाधान। मेरे मामले में मुझे "प्राकृतिक" छवि आकार पता है जब इसे DOM पर रखा जाता है और ब्राउज़र को छवियों को लोड करने के बाद आगे स्क्रॉलिंग को रोकने के लिए मुझे उचित ऊंचाई के साथ एक छवि प्लेसहोल्डर की आवश्यकता होती है। .Ar- बाहरी में, मेरे पास पिक्सेल में छवि की चौड़ाई है, .ar में मेरे पास पैडिंग-बॉटम है जिसकी गणना वास्तविक छवि पहलू अनुपात से की जाती है। अर-इनर के बजाय मेरे पास इमेज ही है (<img>)। हालाँकि मुझे टॉप, बॉटम, लेफ्ट और राइट सेट करने के बजाय 100% चौड़ाई सेट करनी थी। जब मैं अधिकतम बाहरी के लिए maxWidth सेट करता हूं, तो माता-पिता के छोटे होने पर छवि अच्छी तरह से मापती है, लेकिन अपने प्राकृतिक आकार की तुलना में बड़े आकार के पैमाने पर नहीं होती है।

— Mi-La

Answer 6

जैसा कि यहां कहा गया है w3schools.com पर और कुछ हद तक इस स्वीकार किए गए उत्तर में दोहराया गया है , मानों को प्रतिशत के रूप में पैडिंग (मेरा जोर):

निर्दिष्ट तत्व की चौड़ाई के प्रतिशत में पैडिंग निर्दिष्ट करता है

एर्गो, एक उत्तरदायी DIV का सही उदाहरण जो 16: 9 पहलू अनुपात रखता है, इस प्रकार है:

सीएसएस

.parent {
    position: relative;
    width: 100%;
}
.child {
    position: relative;
    padding-bottom: calc(100% * 9 / 16);
}
.child > div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

एचटीएमएल

<div class="parent">
    <div class="child">
        <div>Aspect is kept when resizing</div>
    </div>
</div>

JSFiddle पर डेमो

Answer 7

जैसा कि @ वेब-टिकी पहले से ही उपयोग करने का एक तरीका दिखाती है vh/ vw, मुझे स्क्रीन में केंद्र के लिए एक तरीका भी चाहिए, यहां 9:16 पोर्ट्रेट के लिए एक स्निपेट कोड है ।

.container {
  width: 100vw;
  height: calc(100vw * 16 / 9);
  transform: translateY(calc((100vw * 16 / 9 - 100vh) / -2));
}

translateYइस केंद्र को स्क्रीन में रखेगा। calc(100vw * 16 / 9)9/16 के लिए अपेक्षित ऊंचाई है। (100vw * 16 / 9 - 100vh)अतिप्रवाह ऊंचाई है, इसलिए, overflow height/2इसे स्क्रीन पर केंद्र में रखना होगा।

परिदृश्य के लिए, और 16: 9 रखें , आप उपयोग दिखाते हैं

.container {
  width: 100vw;
  height: calc(100vw * 9 / 16);
  transform: translateY(calc((100vw * 9 / 16 - 100vh) / -2));
}

अनुपात 9/16 को बदलना आसान है, पूर्वनिर्धारित करने की आवश्यकता नहीं है 100:56.25या 100:75यदि आप पहले ऊँचाई सुनिश्चित करना चाहते हैं, तो आपको चौड़ाई और ऊँचाई को बदलना चाहिए, जैसे height:100vh;width: calc(100vh * 9 / 16)9:16 पोर्ट्रेट।

यदि आप अलग-अलग स्क्रीन आकार के लिए अनुकूलित करना चाहते हैं, तो आप रुचि भी ले सकते हैं

• पृष्ठभूमि के आकार के कवर / होते हैं
  • ऊपर की शैली समाहित करने के लिए समान है, चौड़ाई पर निर्भर करती है: ऊंचाई अनुपात।
• वस्तु फिट
  • कवर / img / वीडियो टैग के लिए होते हैं
• @media (orientation: portrait)/@media (orientation: landscape)
  • अनुपात बदलने के लिए portrait/ के landscapeलिए मीडिया क्वेरी ।

Answer 8

यह स्वीकृत उत्तर पर एक सुधार है:

• रैपर divs के बजाय छद्म तत्वों का उपयोग करता है
• पहलू अनुपात इसके माता-पिता के बजाय बॉक्स की चौड़ाई पर आधारित है
• जब सामग्री लंबी हो जाएगी तो बॉक्स लंबवत रूप से खिंच जाएगा

.box {
  margin-top: 1em;
  margin-bottom: 1em;
  background-color: #CCC;
}

.fixed-ar::before {
  content: "";
  float: left;
  width: 1px;
  margin-left: -1px;
}
.fixed-ar::after {
  content: "";
  display: table;
  clear: both;
}

.fixed-ar-16-9::before {
  padding-top: 56.25%;
}
.fixed-ar-3-2::before {
  padding-top: 66.66%;
}
.fixed-ar-4-3::before {
  padding-top: 75%;
}
.fixed-ar-1-1::before {
  padding-top: 100%;
}

.width-50 {
  display: inline-block;
  width: 50%;
}
.width-20 {
  display: inline-block;
  width: 20%;
}

<div class="box fixed-ar fixed-ar-16-9">16:9 full width</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-50">16:9</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-20">16:9</div>
<div class="box fixed-ar fixed-ar-3-2 width-20">3:2</div>
<div class="box fixed-ar fixed-ar-4-3 width-20">4:3</div>
<div class="box fixed-ar fixed-ar-1-1 width-20">1:1</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-20">16:9</div>
<div class="box fixed-ar fixed-ar-16-9 width-50">16:9</div>

Comments

बॉक्स की वर्टिकल स्ट्रेचिंग को कैसे निष्क्रिय करें? स्ट्रेचिंग डिव को सख्ती से कहने पर इसका पहलू अनुपात बरकरार नहीं रहता है

— फ्लोरियन

यदि सामग्री अपेक्षित ऊंचाई से अधिक है, तो बॉक्स लंबवत रूप से फैल जाएगा। इस विचार का उपयोग उस सामग्री के साथ किया जाता है जो अपने माता-पिता के आयामों जैसे वीडियो और छवियों से मेल खाने के लिए खिंचाव कर सकती है।

— सलमान ए

Answer 9

मैं का उपयोग कर एक स्मार्ट समाधान पर ठोकर खाई <svg>और display:grid।

ग्रिड तत्व आपको दो (या अधिक) तत्वों के साथ एक ही स्थान पर कब्जा करने की अनुमति देता है, बिना यह निर्दिष्ट करने की आवश्यकता के कि कौन सी ऊंचाई निर्धारित करता है। जिसका मतलब है, बॉक्स से बाहर, लंबा एक अनुपात सेट करता है ।

इसका मतलब है कि आप इसका उपयोग तब कर सकते हैं जब आप जानते हैं कि सामग्री कभी भी पूरी "अनुपात" को भरने के लिए लंबा नहीं होगी और आप बस इस स्थान में सामग्री को स्थिति में लाने के लिए एक रास्ता तलाश रहे हैं (अर्थात इसे दोनों दिशाओं के उपयोग पर केन्द्रित करें) display:flex; align-items:center; justify-content:center)।
यह बहुत ज्यादा एक पारदर्शी का उपयोग कर के रूप में ही है <img>साथ display:blockऔर पूर्व निर्धारित अनुपात, को छोड़कर <svg>हल्का और काफी संशोधित करने के लिए आसान है (अनुपात जवाब देते हुए बदलने के लिए, आप की जरूरत है चाहिए)।

<div class="ratio">
  <svg viewBox="0 0 1 1"></svg>
  <div>
    I'm square
  </div>
</div>

.ratio {
  display: grid;
}
.ratio > * {
  grid-area: 1/1/1/1;
}

आपको बस इतना करने की जरूरत <svg>है:

• <svg viewBox="0 0 4 3"></svg>
• <svg viewBox="0 0 16 9"></svg>

इसे काम करते हुए देखें:

.ratio {
  display: grid;
}
.ratio > * {
  grid-area: 1/1/1/1;
}

/* below code NOT needed for setting the ratio 
 * I just wanted to mark it visually
 * and center contents
 */
.ratio div {
  border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="ratio">
  <svg viewBox="0 0 7 1"></svg>
  <div>
    Fixed ratio 7:1
  </div>
</div>

---

यदि आपको एक ऐसे समाधान की आवश्यकता होती है, जहां सामग्री तत्व का अनुपात उस समय निर्धारित करने की अनुमति न हो, जब वह अधिक लंबा हो (छिपे हुए या ऑटो के साथ), तो आपको position:relativeग्रिड और position:absolute; height:100%; overflow-y: auto;सामग्री पर सेट करने की आवश्यकता है। उदाहरण:

.ratio {
  display: grid;
  position: relative;
}
.ratio > * {
  grid-area: 1/1/1/1;
}


.ratio > div {
  height: 100%;
  overflow-y: auto;
  position: absolute;
  
  /* the rest is not needed */
  border: 1px solid red;
  padding: 0 1rem;
}

<div class="ratio">
  <svg viewBox="0 0 7 1"></svg>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A scelerisque purus semper eget. Sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. A cras semper auctor neque vitae tempus quam pellentesque nec. Morbi enim nunc faucibus a pellentesque sit amet porttitor. Arcu odio ut sem nulla. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. Cras tincidunt lobortis feugiat vivamus at augue eget. Laoreet sit amet cursus sit amet. Amet nulla facilisi morbi tempus iaculis urna id volutpat. Leo in vitae turpis massa sed elementum tempus egestas sed. Egestas integer eget aliquet nibh. Dolor sit amet consectetur adipiscing elit.

<p>Ut aliquam purus sit amet. Eget magna fermentum iaculis eu non diam phasellus vestibulum. Diam in arcu cursus euismod quis viverra nibh. Nullam vehicula ipsum a arcu cursus vitae congue. Vel orci porta non pulvinar neque laoreet suspendisse. At tellus at urna condimentum mattis pellentesque. Tristique senectus et netus et malesuada. Vel pretium lectus quam id leo in. Interdum velit euismod in pellentesque. Velit euismod in pellentesque massa placerat duis. Vitae suscipit tellus mauris a diam maecenas sed enim.

<p>Mauris a diam maecenas sed enim ut sem. In hendrerit gravida rutrum quisque. Amet dictum sit amet justo donec enim diam. Diam vulputate ut pharetra sit amet aliquam id. Urna porttitor rhoncus dolor purus non enim praesent. Purus in massa tempor nec feugiat nisl pretium. Sagittis vitae et leo duis ut. Facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris. Volutpat odio facilisis mauris sit amet massa vitae tortor condimentum. Aliquam purus sit amet luctus venenatis lectus magna. Sit amet purus gravida quis blandit turpis. Enim eu turpis egestas pretium aenean. Consequat mauris nunc congue nisi. Nunc sed id semper risus in hendrerit gravida rutrum. Ante metus dictum at tempor. Blandit massa enim nec dui nunc mattis enim ut.
  </div>
</div>

Answer 10

आपके समाधान के आधार पर मैंने कुछ ट्रिक बनाई हैं:

जब आप इसका उपयोग करते हैं, तो आपका HTML केवल होगा

<div data-keep-ratio="75%">
    <div>Main content</div>
</div>

इसे इस तरह बनाने के लिए उपयोग करें: CSS:

*[data-keep-ratio] {
    display: block;
    width: 100%;
    position: relative;
}
*[data-keep-ratio] > * {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

और js (jQuery)

$('*[data-keep-ratio]').each(function(){ 
    var ratio = $(this).data('keep-ratio');
    $(this).css('padding-bottom', ratio);
});

और यह होने पर आप सिर्फ data-keep-ratioऊंचाई / चौड़ाई के लिए सेट करते हैं और यह बात है।

Comments

आपको उपयोग data-keep-ratioनहीं करना चाहिए keep-ratioऔर इसका उपयोग करके मूल्य प्राप्त करना चाहिए$(this).data('keep-ratio');

— रॉबर्ट

आपका कोड अभी काम कर रहा है और शायद हमेशा के लिए काम करेगा, लेकिन यह मानक नहीं है और ब्राउज़र भविष्य में कभी भी इसका समर्थन करना बंद कर सकते हैं

— रॉबर्ट

यहाँ JS का उपयोग करने से बुरी खबर आएगी!

— आमिर होसैन अहमदी

Answer 11

आप एक svg का उपयोग कर सकते हैं। कंटेनर / आवरण की स्थिति को सापेक्ष बनाएं, पहले एसवीजी को स्थिर रूप से तैनात करें और फिर पूरी तरह से तैनात सामग्री (शीर्ष: 0; बाएं; 0: दाएं: 0; नीचे: 0;) लगाएं।

उदाहरण के साथ 16: 9 अनुपात:

image.svg: (src में इनबिल्ट किया जा सकता है)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 9" width="16" height="9"/>

सीएसएस:

.container {
  position: relative;
}
.content {
  position: absolute;
  top:0; left:0; right:0; bottom:0;
}

HTML:

<div class="container">
  <img style="width: 100%" src="image.svg" />
  <div class="content"></div>
</div>

ध्यान दें कि इनलाइन svg काम नहीं करती है, लेकिन आप svg को urlencode कर सकते हैं और इसे img src में एम्बेड कर सकते हैं।

<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%209%22%20width%3D%2216%22%20height%3D%229%22%2F%3E" style="width: 100%;" />

Answer 12

SCSS मेरे मामले में सबसे अच्छा समाधान है; डेटा विशेषता का उपयोग करना:

[data-aspect-ratio] {
    display: block;
    max-width: 100%;
    position: relative;

    &:before {
        content: '';
        display: block;
    }

    > * {
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
}
[data-aspect-ratio="3:1"]:before {
    padding-top: 33.33%;
}
[data-aspect-ratio="2:1"]:before {
    padding-top: 50%;
}
[data-aspect-ratio="16:9"]:before {
    padding-top: 56.25%;
}
[data-aspect-ratio="3:2"]:before {
    padding-top: 66.66%;
}
[data-aspect-ratio="4:3"]:before {
    padding-top: 75%;
}
[data-aspect-ratio="1:1"]:before {
    padding-top: 100%;
}
[data-aspect-ratio="3:4"]:before {
    padding-top: 133.33%;
}
[data-aspect-ratio="2:3"]:before {
    padding-top: 150%;
}
[data-aspect-ratio="9:16"]:before {
    padding-top: 177.77%;
}
[data-aspect-ratio="1:2"]:before {
    padding-top: 200%;
}
[data-aspect-ratio="1:3"]:before {
    padding-top: 300%;
}

उदाहरण के लिए :

<div data-aspect-ratio="16:9"><iframe ...></iframe></div>

स्रोत

Comments

बस FYI करें ... आप यह सटीक कार्य कर सकते हैं (विशेषता चयनकर्ताओं का उपयोग करके) सादे सीएसएस का उपयोग करके बिल्कुल उसी तरह की लाइनों में। [data-aspect-ratio]विशेषता चयनकर्ता सीएसएस में आप के लिए उपलब्ध है।

— रजनीश

Answer 13

जबकि अधिकांश उत्तर बहुत शांत होते हैं, उनमें से अधिकांश के लिए एक छवि पहले से ही सही ढंग से आकार होनी चाहिए ... अन्य समाधान केवल एक चौड़ाई के लिए काम करते हैं और उपलब्ध ऊंचाई की परवाह नहीं करते हैं, लेकिन कभी-कभी आप एक निश्चित ऊंचाई में भी सामग्री को फिट करना चाहते हैं। ।

मैंने उन्हें पूरी तरह से पोर्टेबल और फिर से उपयोग करने योग्य समाधान लाने के लिए एक साथ करने की कोशिश की है ... चाल एक छवि के ऑटो स्केलिंग का उपयोग करने के लिए है, लेकिन एक पूर्व-रेंडर किए गए चित्र या किसी भी रूप का उपयोग करने के बजाय इनलाइन svg तत्व का उपयोग करें दूसरा HTTP अनुरोध ...

div.holder{
  background-color:red;
  display:inline-block;
  height:100px;
  width:400px;
}
svg, img{
  background-color:blue;
  display:block;
  height:auto;
  width:auto;
  max-width:100%;
  max-height:100%;
}
.content_sizer{
  position:relative;
  display:inline-block;
  height:100%;
}
.content{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-color:rgba(155,255,0,0.5);
}

<div class="holder">
  <div class="content_sizer">
    <svg width=10000 height=5000 />
    <div class="content">
    </div>
  </div>
</div>

ध्यान दें कि मैंने एसवीजी की चौड़ाई और ऊंचाई विशेषताओं में बड़े मूल्यों का उपयोग किया है, क्योंकि इसे अधिकतम अपेक्षित आकार से बड़ा होना चाहिए क्योंकि यह केवल सिकुड़ सकता है। उदाहरण div का अनुपात 10: 5 बनाता है

Answer 14

सिर्फ एक आइडिया या हैक।

div {
  background-color: blue;
  width: 10%;
  transition: background-color 0.5s, width 0.5s;
  font-size: 0;
}

div:hover {
  width: 20%;
  background-color: red;
}
  
img {
  width: 100%;
  height: auto;
  visibility: hidden;
}

<div>
  <!-- use an image with target aspect ratio. sample is a square -->
  <img src="http://i.imgur.com/9OPnZNk.png" />
</div>

Comments

यह CSS-only समाधान नहीं है ... अब, यदि आपने छद्म तत्व में base64 एन्कोड की गई छवि का उपयोग किया होता, तो वह एक अच्छा समाधान होता।

— रेनविस

वास्तव में कोई सीएसएस-केवल समाधान है। HTML वेब का मूल घटक है। मेरा मानना ​​है कि प्रश्न का उद्देश्य संसाधन / प्रसंस्करण को बचाने के लिए जेएस का उपयोग करने से बचना है।

— ओलांद

मुझे यकीन नहीं है कि अगर छद्म तत्व काम करेगा। मैंने इस समाधान के लिए इसके पहलू अनुपात को काम करने के लिए img तत्व की संपत्ति का उपयोग किया।

— ऑरलैंड

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

— gaमेगा

Answer 15

आपको बताता है कि आपके पास 2 divs है outher div एक कंटेनर है और भीतर कोई भी तत्व हो सकता है जिसे आपको इसका अनुपात रखने की आवश्यकता हो (img या youtube iframe या जो भी हो)

html ऐसा दिखता है:

<div class='container'>
  <div class='element'>
  </div><!-- end of element -->

आपको "तत्व" का अनुपात रखने की आवश्यकता है

अनुपात => 4 से 1 या 2 से 1 ...

सीएसएस इस तरह दिखता है

.container{
  position: relative;
  height: 0
  padding-bottom : 75% /* for 4 to 3 ratio */ 25% /* for 4 to 1 ratio ..*/

}

.element{
  width : 100%;
  height: 100%;
  position: absolute; 
  top : 0 ;
  bottom : 0 ;
  background : red; /* just for illustration */
}

पैडिंग जब% में निर्दिष्ट की जाती है तो इसकी गणना चौड़ाई के आधार पर की जाती है ऊँचाई पर नहीं। .. तो मूल रूप से आपको इससे कोई फर्क नहीं पड़ता कि आपकी ऊँचाई क्या है, इसकी गणना हमेशा उसी के आधार पर की जाएगी। जो अनुपात रखेगा।

Answer 16

आप, स्विच का उपयोग के बीच या तो पोर्ट्रेट या लैंडस्केप दृश्य पर व्यूपोर्ट के अंदर एक वर्ग (संभव के रूप में बड़ा है, लेकिन कुछ भी नहीं चिपके हुए बाहर) फिट करने के लिए चाहते हैं vw/ vhउन्मुखीकरण पर portrait/ landscape:

@media (orientation:portrait ) {
  .square {
    width :100vw;
    height:100vw;
  }
} 
@media (orientation:landscape) {
  .square {
    width :100vh;
    height:100vh;
  }
} 

Answer 17

मैं अपना समाधान साझा करना चाहूंगा, जहां मेरे पास imgएक निश्चित पहलू अनुपात भरने के लिए -tag है। मैं उपयोग नहीं कर सका backgroundसीएमएस के समर्थन की कमी की वजह और मैं बहुत की तरह एक शैली टैग का उपयोग करना पसंद नहीं करेंगे: <img style="background:url(...)" />। इसके अलावा, चौड़ाई 100% है, इसलिए इसे कुछ निश्चित समाधानों के रूप में निर्धारित करने की आवश्यकता नहीं है। यह जिम्मेदारी से होगा!

.wrapper {
  width: 50%;
}

.image-container {
  position: relative;
  width: 100%;
}

.image-container::before {
  content: "";
  display: block;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ratio-4-3::before {
  padding-top: 75%;
}

.ratio-3-1::before {
  padding-top: calc(100% / 3);
}

.ratio-2-1::before {
  padding-top: 50%;
}

<div class="wrapper"> <!-- Just to make things a bit smaller -->
  <p>
  Example of an 4:3 aspect ratio, filled by an image with an 1:1 ratio.
  </p>
  <div class="image-container ratio-4-3"> <!-- Lets go for a 4:3 aspect ratio -->
    <img src="https://placekitten.com/1000/1000/" alt="Kittens!" />
  </div>
  <p>
  Just place other block elements around it; it will work just fine.
  </p>
</div>

Answer 18

मैं इस मुद्दे पर काफी बार चला हूं, इसलिए मैंने इसके लिए एक जेएस समाधान बनाया। यह मूल रूप से आपके द्वारा निर्दिष्ट अनुपात द्वारा तत्व की चौड़ाई के अनुसार डोमेमेंट की ऊंचाई को समायोजित करता है। आप इसे निम्नानुसार उपयोग कर सकते हैं:

<div ratio="4x3"></div>

कृपया ध्यान रखें कि चूंकि यह तत्व की ऊंचाई निर्धारित कर रहा है, इसलिए तत्व display:blockया तो होना चाहिए display:inline-block।

https://github.com/JeffreyArts/html-ratio-component

Comments

हालाँकि मैंने आपका कोड नहीं देखा है या कोशिश की है (मेरे पास पहले से ही मेरा अपना है) मैंने आपके उत्तर को केवल इस तथ्य के लिए उकेरा है कि आप एकमात्र विश्वसनीय समाधान प्रस्तुत करते हैं, एक जेएस स्क्रिप्ट।

— थियो डी ओर

प्रश्न विशेष रूप से एक समाधान के लिए पूछा गया था जिसे जावास्क्रिप्ट की आवश्यकता नहीं थी।

— फ्लिम

Answer 19

आप एसवीजी का उपयोग करके इसे प्राप्त कर सकते हैं।

यह एक मामले पर निर्भर करता है, लेकिन कुछ में यह वास्तव में उपयोगी है। एक उदाहरण के रूप में - आप background-imageनिश्चित ऊंचाई निर्धारित किए बिना सेट कर सकते हैं या <iframe>अनुपात 16:9और position:absoluteआदि के साथ यूट्यूब को एम्बेड करने के लिए इसका उपयोग कर सकते हैं ।

के लिए 3:2अनुपात सेट viewBox="0 0 3 2"और इतने पर।

उदाहरण:

div{
    background-color:red
}
svg{
    width:100%;
    display:block;
    visibility:hidden
}

.demo-1{width:35%}
.demo-2{width:20%}

<div class="demo-1">
  <svg viewBox="0 0 3 2"></svg>
</div>

<hr>

<div class="demo-2">
  <svg viewBox="0 0 3 2"></svg>
</div>

Answer 20

कहो कि आपको चौड़ाई बनाए रखना पसंद है: 100px और ऊंचाई: 50px (यानी, 2: 1) बस इस गणित को करें:

.pb-2to1 {
  padding-bottom: calc(50 / 100 * 100%); // i.e., 2:1
}

Answer 21

आप फ्लक्स लेआउट (FWD) का उपयोग कर सकते हैं।

https://en.wikipedia.org/wiki/Adaptive_web_design

यह लेआउट को बनाए रखेगा और बनाए रखेगा, इसका थोड़ा जटिल है लेकिन सामग्री (RWD) जैसी सामग्री को धक्का दिए बिना एक पृष्ठ का आकार बदलने की अनुमति देता है।

यह प्रतिक्रियाशील लग रहा है, लेकिन यह स्केलिंग है। https://www.youtube.com/watch?v=xRcBMLI4jbg

आप यहाँ सीएसएस स्केलिंग फार्मूला पा सकते हैं:

http://plugnedit.com/pnew/928-2/

Comments

यह प्रश्न का उत्तर कैसे देता है?

— फ्लिम

Answer 22

कैनवास तत्व का उपयोग करके पहलू अनुपात को बनाए रखने का एक सरल तरीका।

कार्रवाई में इसे देखने के लिए नीचे दिए गए आकार का आकार बदलने का प्रयास करें।

मेरे लिए, इस दृष्टिकोण ने सबसे अच्छा काम किया, इसलिए मैं इसे दूसरों के साथ साझा कर रहा हूं ताकि वे भी इससे लाभान्वित हो सकें।

.cont {
  border: 5px solid blue;
  position: relative;
  width: 300px;
  padding: 0;
  margin: 5px;
  resize: horizontal;
  overflow: hidden;
}

.ratio {
  width: 100%;
  margin: 0;
  display: block;
}

.content {
  background-color: rgba(255, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

<div class="cont">
  <canvas class="ratio" width="16" height="9"></canvas>
  <div class="content">I am 16:9</div>
</div>

गतिशील ऊंचाई के साथ भी काम करता है!

.cont {
  border: 5px solid blue;
  position: relative;
  height: 170px;
  padding: 0;
  margin: 5px;
  resize: vertical;
  overflow: hidden;
  display: inline-block; /* so the div doesn't automatically expand to max width */
}

.ratio {
  height: 100%;
  margin: 0;
  display: block;
}

.content {
  background-color: rgba(255, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

<div class="cont">
  <canvas class="ratio" width="16" height="9"></canvas>
  <div class="content">I am 16:9</div>
</div>

Comments

मेरे लिए yup ने मदद की, अब मैं इसका उपयोग इमेज पैरेंट डिव हाइट सेट करने के लिए कर सकता हूँ)

— एलेक्स

Answer 23

मैंने एक नया उपाय इस्तेमाल किया।

.squares{
  width: 30vw
  height: 30vw

मुख्य पहलू अनुपात के लिए

.aspect-ratio
  width: 10vw
  height: 10vh

हालांकि, यह पूरे व्यूपोर्ट के सापेक्ष है। इसलिए, यदि आपको एक div की आवश्यकता है जो व्यूपोर्ट की चौड़ाई का 30% है, तो आप इसके बजाय 30vw का उपयोग कर सकते हैं, और जब से आप चौड़ाई जानते हैं, आप उन्हें calc और vw इकाई का उपयोग करके ऊंचाई में पुन: उपयोग करते हैं।

Comments

क्या यह वास्तव में पहले से उल्लिखित दूसरे उच्चतम श्रेणी के उत्तर नहीं है?

— रेनविस

Answer 24

खैर, हमने हाल ही में उपयोग करने की क्षमता प्राप्त की है aspect-ratio में सीएसएस में संपत्ति ।

https://twitter.com/Una/status/1260980901934137345/photo/1

नोट: समर्थन अभी तक सबसे अच्छा नहीं है ...

https://caniuse.com/#search=aspect-ratio

Answer 25

यदि संपूर्ण कंटेनर संरचना प्रतिशत आधारित थी, तो यह डिफ़ॉल्ट व्यवहार होगा, क्या आप अधिक विशिष्ट उदाहरण प्रदान कर सकते हैं?

नीचे एक उदाहरण दिया गया है कि मेरा क्या मतलब है, यदि आपका पूरा अभिभावक पदानुक्रम% आधारित था, कोई भी ब्राउज़र विंडो समायोजन बिना किसी अतिरिक्त js / css के काम करेगा, क्या यह आपके लेआउट के साथ होने की संभावना नहीं है?

<div style="width: 100%;">
   <div style="width: 50%; margin: 0 auto;">Content</div>
</div>

Comments

मूल प्रश्न पर मेरा संपादन देखें। मैं यह नहीं देखता कि यह तकनीक पहलू अनुपात को कहाँ रखेगी, ऊँचाई नहीं बदलेगी।

— जैक सेप