एक उत्तरदायी छवि

Question

पर लंबवत और क्षैतिज रूप से केंद्रित पाठ मैं पृष्ठ पर व्यापक होने पर बढ़ने वाली छवि पर लंबवत और क्षैतिज रूप से टेक्स्ट टेक्स्ट को देख रहा हूं।

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

तो मुझे वर्तमान में इसमें दो तत्वों, आईएमजी और ओवरले टेक्स्ट के साथ एक div मिला है। छवि चौड़ाई अपने कंटेनर की चौड़ाई के 100% पर सेट है, और ऊंचाई तदनुसार बदलती है। नतीजतन, हालांकि, मैं ओवरले टेक्स्ट पदनाम सेट नहीं कर सकता: पूर्ण और शीर्ष: 80px या कुछ, क्योंकि शीर्ष से दूरी अलग-अलग होनी चाहिए। और यहां तक ​​कि शीर्ष: 25% या जो भी काम नहीं करता है, क्योंकि ए) यदि पृष्ठ की चौड़ाई टेक्स्ट को निचोड़ने के लिए कम हो जाती है, या यदि वहां और अधिक टेक्स्ट है, तो लंबवत केंद्रिंग को कम/कम होने पर फेंक दिया जाता है लाइनें, और बी) प्रतिशत मनमाने ढंग से है - यह 50 या कुछ नहीं है, क्योंकि यह छवि 0% नीचे टेक्स्ट ओवरले के को रखेगा, जब मैं ओवरले के का केंद्र चाहता हूं ।

मैंने अन्य चीजों के साथ this post पर देखा है, जो निश्चित रूप से करीब है - लेकिन दोनों समाधानों में, छवि ऊंचाई आकार बदलने में असमर्थ है, और पूर्व में, जेएस पेज लोड पर लोड होता है, लेकिन फिर फ्रीज , ताकि यदि मैं पृष्ठ चौड़ाई/ऊंचाई बदलता हूं, तो चीजें अजीब हो जाती हैं। आदर्श रूप में, इस समाधान में जेएस को उस कारण से शामिल नहीं किया जाएगा (भले ही यह प्रत्येक आकार में पुनः लोड हो, जो गैर-आदर्श लगता है), लेकिन यदि यह एकमात्र समाधान है, तो मैं इसे ले जाऊंगा।

इसके अलावा, केवल अतिरिक्त विवरण/मज़े के लिए, मैंने छवि पर अधिकतम ऊंचाई निर्धारित की है, क्योंकि मैं नहीं चाहता कि यह सिनेमा प्रदर्शन पर भी लगभग 300px ऊंचाई से अधिक हो।

Basic fiddle of current attempt here, और नीचे समान कोड। कोई विचार? धन्यवाद!

एचटीएमएल

<div class='quotation_div'> 
    <img src='http://www.mountainprofessor.com/images/mount-ranier-mount-features-2.jpg'> 
    <div class='overlay'> 
     <p>Any reasonable amount of text should be able to go here. I want it to be able to center vertically even if it takes up 2 or 3 lines.</p> 
    </div> 
</div> 

सीएसएस

.quotation_div { 
position: relative; 
display: table; 
} 
img { 
    width: 100%; 
    max-height: 300px; 
} 
.overlay { 
    z-index: 99; 
    width: 70%; 
    margin-left: 15%; 
    vertical-align: middle; 
    position: absolute; 
    top: 25%; /* Obvious problem, cause it's arbitrary */ 
} 
p { 
    text-align: center; 
    color: red; 
    font-size: 165%; 
    font-weight: lighter; 
    line-height: 2; 
} 

Answer 1

आप सीएसएस background-size उपयोग कर सकते हैं 100% करने के लिए चौड़ाई सेट करने और ऊंचाई पहलू अनुपात बनाए रखने के लिए गणना की जाएगी।

यहां a fiddle उस तकनीक का उपयोग कर रहा है।

आप एक HTML तत्व के रूप में छवि चाहते हैं, तो मैं सुझाव है कि आप सेट यह पूर्ण करने के लिए स्थिति है और ओवरले केंद्र के लिए disply:table-cell की एक ही विधि का उपयोग करें:

यहाँ कि विधि का उपयोग कर a fiddle है, यह एक फैला max-height की वजह से छवि।

Answer 2

मैं सिर्फ केंद्र के लिए छवि

आशा में मदद करता है कि

Answer 3

कृपया के रूप में .overlay के लिए सीएसएस नीचे प्रयास करें एचटीएमएल

<div align="center"></div>

प्राप्त करने के लिए अपने मौजूदा कोड के चारों ओर करने के लिए जोड़ा आपके बेड़े में

.overlay { 
    z-index: 99; 
    width: 70%; 
    /* height: 100%; */ 
    /* margin-left: 15%; */ 
    /* vertical-align: middle; */ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%,-50%); 
} 

या यह अद्यतन फीडल लिंक http://jsfiddle.net/hLdbZ/284/