बूटस्ट्रैप थंबनेल पर ओवरले कैसे बनाएं?

Question

मैं उत्तरदायी लेआउट के साथ twitter bootstrap 2.1.1 का उपयोग कर रहा हूं और मैं छवि के निचले दाएं कोने में एक लेबल फ़्लोट करना चाहता हूं। मेरी समस्याओं में से एक यह है क्योंकि यह उत्तरदायी है जब थंबनेल व्यापक होता है तो यह छवि बहुत दूर तैरती है। दूसरा मुद्दा यह है कि मैं इसे दाईं ओर तैरने के लिए प्रतीत नहीं कर सकता। मुझे यह भी जोड़ना चाहिए कि हालांकि मैं इसे दाहिने हाथ के कोने में चाहता हूं, लेकिन मैं इसे कुछ पिक्सल से ऑफसेट करना चाहता हूं, यह छवि के किनारे पर सही नहीं है। साथ ही टेक्स्ट हमेशा फोटो गायब हो सकता है, यह तब होता है जब एक डिफ़ॉल्ट छवि दिखाई जाती है।

यहाँ मेरी एचटीएमएल अब तक

<li class="span4"> 
    <div class="photo-group thumbnail"> 
    <a href="/recipes/50500235aa113eb1870001d8" class="photo-wrapper"> 
     <img alt="300x200&amp;text=photo" src="http://www.placehold.it/300x200&amp;text=Photo"> 
     <span class="label label-inverse photo-label">Photo Missing</span> 
    </a> 
    <div class="caption"> 
     <div class="pull-right"> 
     by <a href="https://stackoverflow.com/users/50494983aa113ebd5c000001"> 
    hadees 
     </a> 
     </div> 
     <a href="/recipes/50500235aa113eb1870001d8">Chocolate Crackle Cookies</a> 
    </div> 
    </div> 
</li> 

है और यहाँ मेरी सीएसएस

.content-header { 
    padding-bottom: 10px; 
} 

.thumbnail > a > img { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    max-width: 100%; 
} 

.photo-group .photo-wrapper { 
    position: relative; 
} 

.photo-group .photo-wrapper .photo-label { 
    position: absolute;  
    bottom: 0; 
} 

.photo-group .photo-wrapper .photo-label { 
    float: right; 
}​ 

मैं भी एक बेहतर उदाहरण के लिए एक jsfiddle मिल गया है है।

शायद इसे संभालने का सही तरीका केवल फोटोग्रुप की अधिकतम चौड़ाई 300 बनाना है, लेकिन मुझे लगता है कि डेस्कटॉप पूर्ण स्क्रीन पर उस तरह का मजाकिया दिखता है। http://jsfiddle.net/AdVCT/9/

अनिवार्य रूप से, ताकि आप पूरी तरह इस आवरण के भीतर लेबल रख सकते हैं आप, दोनों की छवि और लेबल के चारों ओर एक आवरण डाल करने के लिए की जरूरत है::

Answer 1

यहाँ बेला के अपने संस्करण है

 <div class="photo"> 
      <img alt="..." src="..." /> 

      <span class="label label-inverse photo-label">Photo Missing</span> 
     </div> 

और फिर कुछ सीएसएस के साथ, आप .photo को केंद्रित करने के लिए बदल सकते हैं, लेकिन इसके अंदर की छवि जितनी बड़ी हो सकती है (कैप्शन पूरी तरह से स्थित है, इसलिए इसे प्रभावी रूप से पृष्ठ प्रवाह से बाहर निकाला जाता है और इसकी चौड़ाई प्रभावित नहीं होती है माता-पिता इत्यादि):

.photo-group .photo-wrapper .photo { 
    position: relative; 
    margin: 0 auto; 
    display: table; 
} 

और मार्जिन-बाएं को हटाएं: ऑटो/मार्जिन-दाएं:। थंबनेल> ए> आईएमजी नियम से ऑटो। अंत में, छवि, उपयोग की तरफ से थोड़ा लेबल ऑफसेट करने के लिए:

.photo-group .photo-wrapper .photo-label { 
    position: absolute;  
    bottom: 5px; 
    right: 5px; 
} 

और जो कुछ भी आप ऑफसेट होना चाहता हूँ के लिए 5px निर्धारित किया है।