jquery - Inline image and caption in article - conform caption's width to image's width -

यह मेरा कोड है:

  & lt; div class = "image" & gt; & Lt; img src = "image.jpg" alt = "छवि विवरण" / & gt; & Lt; p class = "caption" & gt; यह छवि कैप्शन है & lt; / p & gt; & Lt; / div & gt;  

यहां मेरा सीएसएस है:

  .image {स्थिति: रिश्तेदार; सही नाव; मार्जिन: 8px 0 10px 10px; }। कैप्शन {फ़ॉन्ट-वजन: बोल्ड; रंग: # 444666; }  

ऊपर है, कैप्शन div.image की चौड़ाई के अनुरूप होगा। मेरी समस्या अक्सर आईएमजी आकार में भिन्न होती है, 100px चौड़ाई से 250px चौड़ाई तक होती है मैं कैप्शन की चौड़ाई को छवि की इसी चौड़ाई के अनुरूप बनाना चाहूंगा, कोई बात नहीं आकार।

हालांकि मैं इसके लिए और शब्दावली के लिए अच्छा लगेगा, मुझे यकीन नहीं है कि कैसे आसान यह img के साथ p.caption स्विच करना होगा बेशक, मैं उस विधि को पसंद करता हूं लेकिन एक समय में यह एक कदम उठा रहा हूं।

क्या कुछ जावा कोड है जो मैं छवि की चौड़ाई का पता लगा सकता हूं और उस चौड़ाई को एक इनलाइन शैली के रूप में जोड़ सकता हूं कैप्शन टैग के लिए?

क्या ऐसा करने का एक बेहतर तरीका है? मैं सुझावों के लिए खुला हूँ।

आप ऐसा कुछ कर सकते हैं:

  $ (window)। Load (function () {$ ("। Image.c.caption")। प्रत्येक (फ़ंक्शन () {$ (this)। वाइड ($ (this) .siblings ("img") चौड़ाई ())। PrependTo ($ (यह)। Parent ());});});   
 यह  & lt; p & gt;  से पहले  & lt; img & gt;  से आगे बढ़ता है, जिसे आपने पूछा था। 
 
।