कैसे गतिशील रूप से आकार, केंद्रित छवियों

Question

के लिए ट्विटर बूटस्ट्रैप छवि हिंडोला विस्तार करने के लिए मैं गतिशील आकार वाली छवियां (500x400 अधिकतम) का समर्थन करने के लिए डिफ़ॉल्ट बूटस्ट्रैप छवि हिंडोला विस्तार करने के लिए कोशिश कर रहा हूँ, दोनों क्षैतिज और ऊर्ध्व रूप से केंद्रित। इसके अतिरिक्त, मैं मूल कैप्शन लेआउट को बनाए रखना चाहता हूं, जो छवि के नीचे कैप्शन को एंकर करता है, कैप्शन div पूरी तरह से छवि में विस्तारित करता है (लेकिन आगे नहीं।)

मैंने एक पहेली को एक साथ रखा है , जो कि डिफ़ॉल्ट बूटस्ट्रैप सेटअप के एक काफी साफ कार्यान्वयन है (सीएसएस अनुभाग के अंत में केवल 4 अतिरिक्त शैलियों देखते हैं):

http://jsfiddle.net/rdugan/JFBFU/26/

मैं काफी आसानी से जोड़कर क्षैतिज केंद्रित और कैप्शन आवश्यकताओं को पूरा कर सकते छवि और कैप्शन के आस-पास एक 'इनलाइन' div, और माता-पिता पर 'टेक्स्ट-एलाइन: सेंटर' का उपयोग करना। हालांकि, ऊर्ध्वाधर केंद्र एक समस्या (हमेशा के रूप में) रहता है।

वैकल्पिक रूप से, मैंने अलग-अलग divs पर 'डिस्प्ले: टेबल-सेल' (और साथ ही साथ केंद्रित शैलियों) का उपयोग करने की कोशिश की है - कुछ में मामलों में मैं कैरोसेल कार्यक्षमता को गड़बड़ करता हूं, जबकि दूसरों में मैं छवि केंद्रित करता हूं, लेकिन कैप्शन एंकरिंग खो देता हूं।

किसी भी संकेत बहुत सराहना की जाएगी - पिछले कुछ समय से इस पर मेरे सिर पीटने की गई।

Answer 1

आप इन नियमों के साथ क्षैतिज केंद्रित कर सकता है:

.carousel-भीतरी {text-align: केंद्र; }

.carousel .item> img {display: inline-ब्लॉक; }

खड़ी संरेखित के लिए आप बाहर की जाँच करनी चाहिए इस: http://www.student.oulu.fi/~laurirai/www/css/middle/

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

.carousel .item { 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

हालांकि:

* .html में:

<div class="item" style="background-image: url('[path-to-image].png')"> 
    <!-- omit the <img> tag --> 
    <!-- the rest of the stuff that was in the <div> goes here --> 
</div> 

* .css में

Answer 2

div हिंडोला आइटम वाली पर सीधे सीएसएस पृष्ठभूमि गुण का उपयोग करें ऐसा लगता है कि कैरोसेल नेविगेशन तीर तोड़ने लगते हैं।

Answer 3

इस स्निपेट

.carousel-inner > .item > img { 
    min-width: 100%; 
}