उत्तरदायी छवि खींचती है - वाई धुरी के आधार पर एक ग्रिड के साथ?

Question

मैं अपने दांतों को उस चीज पर काट रहा हूं जो मेरे लिए काफी बुनियादी लगता है - सिद्धांत में।

है कि हम हर दिन का उपयोग करें, बूटस्ट्रैप, नींव आदि के रूप में नियमित रूप से उत्तरदायी ग्रिड के बारे में सोचो ... तो यह 90 डिग्री से बारी बारी से:

ग्रे कंटेनर एक बढ़े हुए छवि है ज्ञात पहलू अनुपात (3: 2) के साथ। नीला कंटेनर स्क्वायर छवियों (अंगूठे) की एक ज्ञात संख्या है जो पूरी तरह से बड़ी छवि के लिए उपयुक्त है। गुलाबी सीमा कंटेनर है, जिसे एक निश्चित ऊंचाई प्राप्त हुई है (जैसे html,body{height:100vh} का 50vh)। सभी छवियों में एक तरफ 100% और एक ऑटो पर है।

तो "ग्रे" छवि को इसके कंटेनर तक फैलाया जाना चाहिए, और फिर अंगूठे का पालन करना चाहिए। वास्तव में, क्लासिक आरडब्ल्यूडी व्यवहार - बस वाई अक्ष पर।

मैं कोशिश की है:

एक क्लासिक ग्रिड

• flexbox (मूल कंटेनर खींच जबकि नहीं अपने यहां कॉल, पहलू-अनुपात-रखरखाव के साथ मदद नहीं करता है), के लिए आवश्यक चौड़ाई की गणना % में कॉलम (सिद्धांत में बाहर काम करता है, लेकिन ब्राउज़र राउंडिंग अनियमितताओं का परिणाम देगा)
• display: table (100% ऊंचाइयों में लात नहीं है, और वहाँ कोई रोस्पेन है, उन्हें घोंसला करने की कोशिश की, भयानक)
• हाँ, टेबल! (मुख्य छवि को इसके पहलू अनुपात के आधार पर खींचने के लिए नहीं मिल सका, और निश्चित रूप से, छोटेस्क्रीन के लिए अंगूठे ढेर करना संभव नहीं होगा)

तो शुरुआत में वापस जा रहा है: क्या यह संभव है सभी शुद्ध HTML/CSS के साथ इस height: 100%, width: auto शैली व्यवहार को पुन: पेश करने के लिए?

यदि हां, तो किस तरह से जाना है?

यदि नहीं, क्यों, और जेएस वर्कअराउंड के रूप में आप क्या सलाह देते हैं?

पीएस मैंने पहले ही नींव की equalizer स्क्रिप्ट की कोशिश की है, फिर से ऊंचाई की गणना करने में त्रुटियों को गोल करना।

पीपीएस: मैं मानता हूं कि मैंने उपरोक्त में से अधिकांश को ज़र्ब फाउंडेशन 6 लोड किया है (जैसा कि मैं इसे पृष्ठ के अन्य हिस्सों के लिए चिपकाना चाहता हूं), तो शायद यह कुछ प्रयासों में हस्तक्षेप कर सकता है?

Answer 1

जैसा कि ऊपर का सुझाव दिया, आप https://stackoverflow.com/editing-helprticlehttp://www.mademyday.de/css-height-equals-width-with-pure-css.html में पढ़ा है, गद्दी और ऊंचाई 0 के साथ खेल सकते इस अनुच्छेद में, मैं के रूप में अच्छी तरह से परीक्षण किया, आशा के लिए आप क्या देख रहे हैं, यह बाहर की जाँच http://codepen.io/wolfitoXtreme/pen/bEeYep

// CSS 
html { 
    height: 100%; 
} 

body, body * { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    box-sizing: border-box; 
} 

#container { 
    margin: 0 auto; 
    width: 50%; 
    height: 100%; 
    display: block; 
    position: relative; 
    background-color: #000000; 
} 
#container #imgMain { 
    padding-bottom: 75%; 
    width: 100%; 
    top: 50%; 
    left: -25%; 
    margin-top: -37.5%; 
    height: 0; 
    position: absolute; 
    background-color: #cccccc; 
} 
#container #imgMain figure { 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
} 
#container #imgMain img { 
    width: 100%; 
    height: 100%; 
    display: block; 
    position: absolute; 
} 
#container #imgGrid { 
    top: 0; 
    right: -50%; 
    width: 50%; 
    height: 100%; 
    position: absolute; 
    z-index: 10; 
    background-color: #f0f0f0; 
} 
#container #imgGrid figure { 
    width: 50%; 
    height: 0; 
    padding-bottom: 37.5%; 
    position: relative; 
    float: left; 
} 

// HTML 
<div id="container"> 



     <div id="imgMain"> 

      <figure> 
       <img src="http://cssguy4hire.com/codePenAssets/aspectRatio/pic01.jpg"> 
      </figure> 

      <div id="imgGrid"> 

       <figure> 
        <img src="http://cssguy4hire.com/codePenAssets/aspectRatio/pic02.jpg"> 
       </figure> 

       <figure> 
        <img src="http://cssguy4hire.com/codePenAssets/aspectRatio/pic03.jpg"> 
       </figure> 

       <figure> 
        <img src="http://cssguy4hire.com/codePenAssets/aspectRatio/pic04.jpg"> 
       </figure> 

       <figure> 
        <img src="http://cssguy4hire.com/codePenAssets/aspectRatio/pic05.jpg"> 
       </figure> 

       <figure> 
        <img src="http://cssguy4hire.com/codePenAssets/aspectRatio/pic06.jpg"> 
       </figure> 

       <figure> 
        <img src="http://cssguy4hire.com/codePenAssets/aspectRatio/pic07.jpg"> 
       </figure> 

       <figure> 
        <img src="http://cssguy4hire.com/codePenAssets/aspectRatio/pic08.jpg"> 
       </figure> 

       <figure> 
        <img src="http://cssguy4hire.com/codePenAssets/aspectRatio/pic01.jpg"> 
       </figure> 

      </div> 

     </div> 




</div>