Div के पहलू अनुपात को बनाए रखें लेकिन CSS में स्क्रीन की चौड़ाई और ऊंचाई भरें?

Question

मेरे पास एक साइट है जिसमें 16:9एक वीडियो की तरह लगभग परिदृश्य का एक निश्चित पहलू अनुपात है ।

मैं इसे उपलब्ध चौड़ाई और उपलब्ध ऊंचाई को भरने के लिए केंद्रित और विस्तारित करना चाहता हूं, लेकिन दोनों तरफ कभी भी बड़ा नहीं होना चाहिए।

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

1. एक लम्बे और पतले पृष्ठ में आनुपातिक ऊँचाई को बनाए रखते हुए पूरी चौड़ाई खींचने वाली सामग्री होगी।
2. एक कम चौड़े पृष्ठ में आनुपातिक चौड़ाई के साथ पूरी ऊँचाई को खींचने वाली सामग्री होगी।

---

मैं देख रहा हूँ दो तरीके हैं:

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

---

मुझे पता है कि आप जेएस के साथ यह आसानी से कर सकते हैं, लेकिन मैं एक शुद्ध सीएसएस समाधान चाहूंगा।

कोई विचार?

Comments

sitepoint.com/… कंटेनर कंटेनर सेट करेंposition: relative (default) height: 0 padding-<top/bottom>: H/W*100%

— उज्जवल सिंह

Answer 1

नई सीएसएस व्यूपोर्ट इकाइयों vw और vh(व्यूपोर्ट चौड़ाई / व्यूपोर्ट ऊंचाई) का उपयोग करें

बेला

लंबवत और क्षैतिज रूप से आकार बदलें और आप देखेंगे कि तत्व हमेशा अनुपात को बिना और स्क्रॉलबार के बिना अधिकतम व्यूपोर्ट आकार को भर देगा!

(शुद्ध) सीएसएस

div
{
    width: 100vw; 
    height: 56.25vw; /* height:width ratio = 9/16 = .5625  */
    background: pink;
    max-height: 100vh;
    max-width: 177.78vh; /* 16/9 = 1.778 */
    margin: auto;
    position: absolute;
    top:0;bottom:0; /* vertical center */
    left:0;right:0; /* horizontal center */
}

* {
  margin: 0;
  padding: 0;
}
div {
  width: 100vw;
  height: 56.25vw;
  /* 100/56.25 = 1.778 */
  background: pink;
  max-height: 100vh;
  max-width: 177.78vh;
  /* 16/9 = 1.778 */
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  /* vertical center */
  left: 0;
  right: 0;
  /* horizontal center */
}

<div></div>

यदि आप अधिकतम 90% चौड़ाई और व्यूपोर्ट की ऊँचाई का उपयोग करना चाहते हैं: FIDDLE

* {
  margin: 0;
  padding: 0;
}
div {
  width: 90vw;
  /* 90% of viewport vidth */
  height: 50.625vw;
  /* ratio = 9/16 * 90 = 50.625 */
  background: pink;
  max-height: 90vh;
  max-width: 160vh;
  /* 16/9 * 90 = 160 */
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<div></div>

इसके अलावा, ब्राउज़र का समर्थन बहुत अच्छा है: IE9 +, FF, Chrome, Safari- caniuse

Comments

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

— हेनरी गिब्सन

उह .. मुझे काम के 2 दिन और उपयोगकर्ता कुंठाओं की अनंत मात्रा में बचाने के लिए धन्यवाद। 1000+ अगर मैं कर सकता था।

— Schoening

आपने बस मुझे इतना समय दिया। आपका बहुत-बहुत धन्यवाद।

— डायलन गट्टे

दुर्भाग्य से, हाल ही में iOS संस्करण का समर्थन नहीं करते , या व्यूपोर्ट इकाइयों के एक टूट कार्यान्वयन है ( vh, vw, vmin, vmax)। हालाँकि, एक वर्कअराउंड है , जो iOS डिवाइसों को लक्षित करने के लिए मीडिया क्वेरी का उपयोग करता है।

— टिम

मैं तुमसे प्यार करता हूँ। महान समाधान!

— गुट्टमबर्ग

Answer 2

Danieldआगे के उपयोग के लिए कम से कम मिश्रण में सुधार का उत्तर दें:

// Mixin for ratio dimensions    
.viewportRatio(@x, @y) {
  width: 100vw;
  height: @y * 100vw / @x;
  max-width: @x / @y * 100vh;
  max-height: 100vh;
}

div {

  // Force a ratio of 5:1 for all <div>
  .viewportRatio(5, 1);

  background-color: blue;
  margin: 0;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

Answer 3

एक का प्रयोग करें सीएसएस मीडिया क्वेरी @media के साथ एक साथ सीएसएस व्यूपोर्ट इकाइयों vw और vhव्यूपोर्ट के पहलू अनुपात के लिए अनुकूल करने के लिए। यह अन्य संपत्तियों को अपडेट करने का लाभ है, जैसे font-size, भी।

यह फिडेल , डिव के लिए निश्चित पहलू अनुपात और इसके पैमाने से मेल खाते पाठ को प्रदर्शित करता है।

प्रारंभिक आकार पूर्ण चौड़ाई पर आधारित है:

div {
  width: 100vw; 
  height: calc(100vw * 9 / 16);

  font-size: 10vw;

  /* align center */
  margin: auto;
  position: absolute;
  top: 0px; right: 0px; bottom: 0px; left: 0px;

  /* visual indicators */
  background:
    url(data:image/gif;base64,R0lGODlhAgAUAIABAB1ziv///yH5BAEAAAEALAAAAAACABQAAAIHhI+pa+EPCwA7) repeat-y center top,
    url(data:image/gif;base64,R0lGODlhFAACAIABAIodZP///yH5BAEAAAEALAAAAAAUAAIAAAIIhI8Zu+nIVgEAOw==) repeat-x left center,
    silver;
}

फिर, जब व्यूपोर्ट वांछित पहलू अनुपात से अधिक व्यापक हो, तो आधार माप के रूप में ऊंचाई पर स्विच करें:

/* 100 * 16/9 = 177.778 */
@media (min-width: 177.778vh) {
  div {
    height: 100vh;
    width: calc(100vh * 16 / 9);

    font-size: calc(10vh * 16 / 9);
  }
}

यह नस में बहुत समान है max-widthऔर @ डानिल्ड द्वारा max-height दृष्टिकोण , बस अधिक लचीला है।

Answer 4

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

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

W3C पैडिंग गुण

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

.object {
    width: 80%; /* whatever width here, can be fixed no of pixels etc. */
    height: 0px;
    padding-bottom: 56.25%;
}
.object .content {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 40px;
}

इसलिए उपरोक्त उदाहरण में ऑब्जेक्ट 80% कंटेनर की चौड़ाई लेता है, और फिर इसकी ऊंचाई उस मूल्य का 56.25% है। यदि इसकी चौड़ाई 160px थी तो नीचे की गद्दी, और इस प्रकार ऊँचाई 90px होगी - 16: 9 पहलू।

यहां थोड़ी सी समस्या, जो आपके लिए कोई समस्या नहीं हो सकती है, वह यह है कि आपकी नई वस्तु के अंदर कोई प्राकृतिक जगह नहीं है। यदि आपको उदाहरण के लिए कुछ पाठ रखने की आवश्यकता है और उस पाठ को अपने स्वयं के पैडिंग मूल्यों को लेने की आवश्यकता है, तो आपको एक कंटेनर जोड़ना होगा और उसमें गुणों को निर्दिष्ट करना होगा।

कुछ पुराने ब्राउज़रों पर भी vw और vh इकाइयों का समर्थन नहीं किया गया है, इसलिए मेरे प्रश्न का स्वीकृत उत्तर आपके लिए संभव नहीं हो सकता है और आपको कुछ और लो-फाई का उपयोग करना पड़ सकता है।

Comments

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

— हेनरी गिब्सन

Answer 5

मैं समझता हूं कि आपने पूछा था कि आप एक CSSविशिष्ट समाधान चाहते हैं। पहलू अनुपात रखने के लिए, आपको वांछित पहलू अनुपात द्वारा ऊंचाई को विभाजित करने की आवश्यकता होगी। 16: 9 = 1.777777777778

कंटेनर के लिए सही ऊंचाई पाने के लिए, आपको वर्तमान चौड़ाई को 1.777777777778 से विभाजित करना होगा। चूँकि आप widthकंटेनर को सिर्फ चेक नहीं कर सकते हैं CSSया प्रतिशत से विभाजित कर सकते हैं CSS, यह बिना JavaScript(मेरी जानकारी के) संभव नहीं है ।

मैंने एक कामकाजी स्क्रिप्ट लिखी है जो वांछित पहलू अनुपात को बनाए रखेगा।

एचटीएमएल

<div id="aspectRatio"></div>

सीएसएस

body { width: 100%; height: 100%; padding: 0; margin: 0; }
#aspectRatio { background: #ff6a00; }

जावास्क्रिप्ट

window.onload = function () {
    //Let's create a function that will scale an element with the desired ratio
    //Specify the element id, desired width, and height
    function keepAspectRatio(id, width, height) {
        var aspectRatioDiv = document.getElementById(id);
        aspectRatioDiv.style.width = window.innerWidth;
        aspectRatioDiv.style.height = (window.innerWidth / (width / height)) + "px";
    }

    //run the function when the window loads
    keepAspectRatio("aspectRatio", 16, 9);

    //run the function every time the window is resized
    window.onresize = function (event) {
        keepAspectRatio("aspectRatio", 16, 9);
    }
}

functionयदि आप उपयोग करके भिन्न अनुपात के साथ कुछ और प्रदर्शित करना चाहते हैं तो आप फिर से उपयोग कर सकते हैं

keepAspectRatio(id, width, height);

Comments

आपके उत्तर के लिए धन्यवाद। स्क्रिप्ट में ऐसा करना अपेक्षाकृत सरल है, लेकिन मैं वास्तव में एक सीएसएस आधारित समाधान चाहता था। मैं वास्तव में तड़क-भड़क वाला विश्वसनीय उत्तरदायी समाधान चाहता हूं, और मुझे लगता है कि कभी-कभी विभिन्न ब्राउज़रों में होने वाली घटनाओं में थोड़ा सा बदलाव होता है। आप ब्राउज़र बदलने के बाद थोड़ा सा अपना रूपांतरण कर रहे हैं, इसलिए यह सबसे अच्छा उपयोगकर्ता अनुभव नहीं देता है। ऐसा कुछ चाहते हैं जो उस पल को बदल दे जो ब्राउज़र आकार बदलता है, इसलिए शुद्ध सीएसएस।

— हेनरी गिब्सन

@ हेनरी गिब्सन स्क्रिप्ट का परीक्षण क्रोम, एफएफ, आईई, ओपेरा और सफारी में किया गया है। सभी काम तड़क-भड़क और ब्राउज़रों के पुराने संस्करणों में भी विश्वसनीय हैं। हर ब्राउज़र में आग लग जाती है। window.onresizeवह पल निकाल दिया जाता है जब ब्राउज़र आकार बदल देता है।

— MCSharp

याद रखें एंड यूजर्स ब्राउजर्स का आकार तकरीबन उतना नहीं रखते जितना डेवलपर्स करते हैं

— सिमोन_विवर

Answer 6

अब इसको संबोधित करने के लिए निर्दिष्ट एक नई सीएसएस संपत्ति है object-fit:।

http://docs.webplatform.org/wiki/css/properties/object-fit

ब्राउज़र समर्थन में अभी भी कुछ कमी है ( http://caniuse.com/#feat=object-fit ) - वर्तमान में Microsoft को छोड़कर अधिकांश ब्राउज़रों में कुछ हद तक काम करता है - लेकिन समय दिया गया यह वही है जो इस प्रश्न के लिए आवश्यक था।

Answer 7

Danield का उत्तर अच्छा है, लेकिन इसका उपयोग केवल तब किया जा सकता है जब div पूरे व्यूपोर्ट को भरता है, या थोड़ा सा उपयोग करके calc, यदि व्यूपोर्ट में अन्य सामग्री की चौड़ाई और ऊंचाई ज्ञात की जाती है , तो इसका उपयोग किया जा सकता है।

हालांकि, margin-bottomपूर्वोक्त उत्तर में विधि के साथ चाल को जोड़कर , समस्या को केवल अन्य सामग्री की ऊंचाई जानने के लिए कम किया जा सकता है। यह उपयोगी है यदि आपके पास एक निश्चित ऊंचाई हैडर है, लेकिन साइडबार की चौड़ाई, उदाहरण के लिए, ज्ञात नहीं है।

body {
  margin: 0;
  margin-top: 100px; /* simulating a header */
}

main {
  margin: 0 auto;
  max-width: calc(200vh - 200px);
}

section {
  padding-bottom: 50%;
  position: relative;
}

div {
  position:absolute;
  background-color: red;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

<main>
  <section>
    <div></div>
  </section>
</main>

यहाँ यह scs का उपयोग करते हुए एक jsfiddle में है , जो इसे और अधिक स्पष्ट करता है कि मूल्य कहां से आते हैं।

Answer 8

डैनियल के जवाब के आधार पर , मैंने इस एसएएसएस मिश्रण को इंटरपोलेशन के साथ लिखा ( #{}) एक यूट्यूब वीडियो के आइफ्रेम के लिए जो बूटस्ट्रैप मोडल डायलॉग के अंदर है:

@mixin responsive-modal-wiframe($height: 9, $width: 16.5,
                                $max-w-allowed: 90, $max-h-allowed: 60) {
  $sides-adjustment: 1.7;

  iframe {
    width: #{$width / $height * ($max-h-allowed - $sides-adjustment)}vh;
    height: #{$height / $width * $max-w-allowed}vw;
    max-width: #{$max-w-allowed - $sides-adjustment}vw;
    max-height: #{$max-h-allowed}vh;
  }

  @media only screen and (max-height: 480px) {
    margin-top: 5px;
    .modal-header {
      padding: 5px;
      .modal-title {font-size: 16px}
    }
    .modal-footer {display: none}
  }
}

उपयोग:

.modal-dialog {
  width: 95vw; // the modal should occupy most of the screen's available space
  text-align: center; // this will center the titles and the iframe

  @include responsive-modal-wiframe();
}

HTML:

<div class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Video</h4>
      </div>
      <div class="modal-body">
        <iframe src="https://www.youtube-nocookie.com/embed/<?= $video_id ?>?rel=0" frameborder="0"
          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen></iframe>
      </div>
      <div class="modal-footer">
        <button class="btn btn-danger waves-effect waves-light"
          data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

यह हमेशा उन काले भागों के बिना वीडियो को प्रदर्शित करेगा जो यूट्यूब iframe में जोड़ता है जब वीडियो की चौड़ाई या ऊंचाई आनुपातिक नहीं होती है। टिप्पणियाँ:

• $sides-adjustment पक्षों पर दिखाई देने वाले इन काले भागों के एक छोटे हिस्से की भरपाई करने के लिए एक मामूली समायोजन है;
• बहुत कम ऊंचाई वाले उपकरणों में (<480px) मानक मोडल में बहुत अधिक स्थान होता है, इसलिए मैंने यह निर्णय लिया:
  1. छिपाना .modal-footer;
  2. की स्थिति को समायोजित .modal-dialog;
  3. के आकार को कम .modal-header।

बहुत परीक्षण के बाद, यह मेरे लिए अब निर्दोष रूप से काम कर रहा है।

Answer 9

यहाँ @ समाधान समाधान पर आधारित है, जो एक div के भीतर भी काम करता है।

उस उदाहरण में, मैं कोणीय का उपयोग कर रहा हूं लेकिन यह जल्दी से वेनिला जेएस या किसी अन्य ढांचे में स्थानांतरित हो सकता है।

मुख्य विचार सिर्फ @ ifanield समाधान को खाली iframe के भीतर ले जाना और iframe विंडो के आकार में बदलाव के बाद आयामों की प्रतिलिपि बनाना है।

उस iframe को अपने पिता तत्व के साथ आयाम फिट करने होते हैं।

https://stackblitz.com/edit/angular-aspect-ratio-by-iframe?file=src%2Findex.html

यहाँ कुछ स्क्रीनशॉट हैं: