सीएसएस पैमाने कई चित्रों व्यूपोर्ट रखने पहलू अनुपात फिट करने के लिए

मैं एक गैलरी, जहां मैं एक पृष्ठ पर एक एल्बम से सभी छवियों को सूचीबद्ध करना चाहते हैं बना रहा हूं: Big Picture style:सीएसएस पैमाने कई चित्रों व्यूपोर्ट रखने पहलू अनुपात फिट करने के लिए

बिग पिक्चर के विपरीत, मैं आनुपातिक के लिए छवियों को चाहते हैं कंटेनर div (.section-images पर सेट करने के लिए स्केल, जो margin: auto 2em; पर सेट है, इसलिए इसकी चौड़ाई उपयोगकर्ता के ब्राउजर माइनस 2*2em की चौड़ाई है) जितनी संभव हो सके उन्हें व्यूपोर्ट की 90% से अधिक ऊंचाई के बिना।

जैसा कि आप कल्पना करते हैं, 400x600 चौड़ाई फिट करने के लिए स्केल किए जाने पर पोर्ट्रेट फोटो इतनी देर तक उपयोगकर्ता स्क्रीन पर पूरी छवि नहीं देख पाएंगे, इसलिए मुझे 90% ऊंचाई से अधिक चौड़ाई स्केलिंग सीमित करने की आवश्यकता क्यों है।

<section class="section-images"> 
    <div class="image-box"> 
     <div class="image-large"> 
      <a href="#"><img foo1></a> 
     </div> 
     <div class="image-description"> 
      blabla1 
     </div> 
     ... MORE IMAGES WITH DESCRIPTONS ... 
    </div> 
    etc 
</section>

प्रत्येक छवि मैं .image-description है के तहत, इस की ऊंचाई अलग अलग होंगे।

महत्वपूर्ण बात यह है कि किसी भी समय एक ही छवि (इसलिए .image-large) व्यूपोर्ट में फिट होना चाहिए, भले ही यह परिदृश्य या चित्र हो।

मैं केवल सीएसएस का उपयोग कर ऐसा करना चाहूंगा, और यदि सीएसएस संभव नहीं है तो केवल जावास्क्रिप्ट ही करना है।

स्रोत

2014-04-16 MindOverflow

समाधान: (मैं इसे सरल समझते हैं और साथ काम करने के लिए आपके कंटेनर के सबसे धारीदार)

html, 
 
body, 
 
.section-images { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.section-images { 
 
    margin: auto 2em; 
 
    text-align: center; 
 
} 
 
img { 
 
    display: block; 
 
    width: auto; 
 
    height: auto; 
 
    max-width: 100%; 
 
    max-height: 90%; 
 
    margin: 20px auto; 
 
}

<section class="section-images"> 
 
    <a href="#"><img src="http://i.imgur.com/hMRnvUx.jpg" /></a> 
 
    <div class="image-description">blabla3<br/>more blablah<br/>and more blablah</div> 
 
    <a href="#"><img src="http://i.imgur.com/lBuIEDh.jpg" /></a> 
 
    <div class="image-description">blabla2</div> 
 
    <a href="#"><img src="http://i.imgur.com/k8BtMvj.jpgg" /></a> 
 
    <div class="image-description">blabla3<br/>more blablah<br/>and more blablah</div> 
 
</section>

स्पष्टीकरण:

इस समाधान इस तथ्य पर आधारित है कि प्रतिशत आकार (चौड़ाई और ऊंचाई) माता-पिता तत्व के आकार के सापेक्ष हैं।

.section-images ध्यान में रखते हुए निर्धारित करके <body> शुरुआत का एक सीधा बच्चा है:

html, body, .section-images { 
    width:100%; 
    height:100%; 
    margin:0; 
}

तो प्रत्यक्ष माता पिता छवियों के के बराबर होती है व्यूपोर्ट आकार।

फिर, आप अपने चित्रों को आसानी से उपयोग करते हुए आकार कर सकते हैं:

img{ 
    width:auto; 
    height:auto; 
    max-width:100%; 
    max-height:90%; 
}

छवियाँ व्यूपोर्ट के 100% चौड़ाई और 90% ऊंचाई से अधिक नहीं होगी, जबकि उनके पहलू अनुपात रखते हुए। और वे दस्तावेज़ के प्रवाह में रहेंगे।

स्रोत

2014-04-16 13:30:27

यह पूरी तरह से काम करता है, और मुझे आश्चर्य है कि यह संभव था और अपेक्षाकृत आसान था, धन्यवाद! – MindOverflow

यह वही है जो मुझे चाहिए लेकिन दुर्भाग्य से मैं बच्चे के माता-पिता को शरीर के प्रत्यक्ष बच्चे के रूप में नहीं प्राप्त कर सकता क्योंकि मैं एक [स्लाइडर] (http://kenwheeler.github.io/slick/ के साथ काम कर रहा हूं)) जिसके लिए कुछ div wraps की आवश्यकता होती है। – J82

@ वेब-टिकी वास्तविक छवि पर जाने से पहले कई लपेटें हैं। तो क्या मुझे उनमें से प्रत्येक को 100% ऊंचाई लागू करनी चाहिए? – J82

कंटेनर section-images की ऊंचाई को स्पष्ट रूप से सेट करें, और overflow से hidden पर सेट करें।

स्रोत

2014-04-16 13:09:34

प्रतिक्रिया देने के लिए धन्यवाद, हालांकि यह आवश्यकताओं को पूरा नहीं करता है। – MindOverflow

आप IE9 + के लिए html, body को बदले बिना व्यूपोर्ट इकाइयों का भी उपयोग कर सकते हैं।

img { 
    width:auto; 
    height:auto; 
    max-width:100%; 
    max-height:90vh; 
}

स्रोत

2015-08-07 14:23:03 DonutReply

सीएसएस पैमाने कई चित्रों व्यूपोर्ट रखने पहलू अनुपात फिट करने के लिए

उत्तर

संबंधित मुद्दे