वास्तव में, केवल पहले दो डेक्लरेशंस (फ्लोट और चौड़ाई) आवश्यक
हैं, बाकी सिर्फ सजावट के लिए है।
इमेज को स्केल करना
यहां एक समस्या है, और वह यह है कि इमेज बहुत चौड़ी हो सकती है। इस
स्थिति में, इमेज हमेशा 136 px चौड़ी होती है और यह चित्र आसपास के
टेक्स्ट का 30% होता है। इसलिए यदि आप विंडो को संकरा बनाते हैं, तो
हो सकता है कि यह इमेज चित्र को ओवरफ्लो कर दे (इसे आज़माएं!)।
यदि आप डॉक्यूमेंट में सभी इमेजेज की चौड़ाई जानते हैं, तो आप इस
तरह एक न्यूनतम चौड़ाई जोड़ सकते हैं:
figure {
min-width: 150px;
}
शाम के सूरज में सेंट ट्रोपेज एवं इसका फोर्ट
एक और तरीका है कि इमेज को स्वयं स्केल करें। यही हमने यहां दाईं
ओर की इमेज के साथ किया है। जैसा कि आप शायद देख सकते हैं कि क्या यदि
आप विंडो को बहुत चौड़ा बनाते हैं, JPEG इमेजेज बहुत अच्छी तरह से
स्केल नहीं होती हैं। लेकिन अगर इमेज SVG प्रारूप में एक डायग्राम या एक ग्राफ है, तो वास्तव में
स्केलिंग खूबसूरती से काम करती है। यहाँ हमारे द्वारा उपयोग किया गया
मार्क-अप है:
<figure>
<p><img class=scaled src="st-tropez.jpg"
alt="St. Tropez">
<figcaption>शाम के सूरज में सेंट ट्रोपेज
एवं इसका फोर्ट</figcaption>
</figure>
अंतिम नियम एकमात्र जोड़ है: यह इमेज को अंदर के चित्र (बॉर्डर एवं
पैडिंग के अंदर का क्षेत्र) के जितना चौड़ा बनाता है ।
शीर्ष पर कैप्शन डालना
कैप फेरैट के पास भूमध्य सागर
एचटीएमएल figcaption के एलिमेंट को चित्र के अंदर या तो पहले या
अंतिम एलिमेंट के रूप में बताता है और, बिना किसी सीएसएस नियम के,
इसके विपरीत कैप्शन क्रमशः चित्र के ऊपर या नीचे होने का कारण होगा।
लेकिन, कोई फर्क नहीं पड़ता कि मार्क-अप, आप सीएसएस में भी
निर्दिष्ट कर सकते हैं कि कैप्शन इमेज के ऊपर या नीचे दिखाई देना
चाहिए। आप ब्राउज़र को बताकर ऐसा करते हैं कि चित्र को टेबल के रूप
में फॉर्मेट किया जाना चाहिए और इमेज के साथ इसका एकमात्र सेल और टेबल
के कैप्शन के रूप में कैप्शन है। पिछले वर्गों से स्टाइल शीट में इन
नियमों को जोड़ें:
इस पृष्ठ पर हमने जिस शैली का उपयोग किया है, उसमें चित्र के चारों
ओर एक ग्रे बॉर्डर शामिल है। दुर्भाग्य से, जब हम शीर्ष या तल पर
कैप्शन लगाने के लिए टेबल लेआउट का उपयोग करते हैं, तो हमें सीमा को
अलग-अलग निर्दिष्ट करने की आवश्यकता होती है, क्योंकि कैप्शन को टेबल
की सीमा के बाहर रखा जाता है। यह हम सीमा का एक हिस्सा कैप्शन पर
डालकर ठीक करते हैं:
एचटीएमएल 5 के विपरीत एचटीएमएल 4 में वह एलिमेंट नहीं है जो एक
कैप्शन के साथ चित्र सम्मिलित करता है। यह प्रस्तावित था (एचटीएमएल 3 देखें), लेकिन
इसे एचटीएमएल 4 में शामिल नहीं किआ गया। यहाँ एक figure element का
अनुकरण करने का एक तरीका है:
<div class=figure>
<p><img src="eiffel.jpg"
width="136" height="200"
alt="Eiffel tower">
<p>पार्क मिनी-फ्रांस में एफेल टावर का स्केल मॉडल
</div>
फिर स्टाइल शीट में आप जिस तरह से चाहते हैं, उस तरह उस चित्र को
प्रारूपित करने के लिए क्लास "figure" का उपयोग करें। उदाहरण के लिए,
चित्र को दाईं ओर आसपास के पैराग्राफ की चौड़ाई के 30% के बराबर जगह
में फ्लोट कराने के लिए, ये नियम काम करेंगे:
पहले की तरह, केवल पहले दो डेक्लरेशंस (फ्लोट और चौड़ाई) आवश्यक
हैं, बाकी सिर्फ सजावट के लिए है।
एचटीएमएल4 में चित्र को स्केल करना
उस वाइड इमेज से बचने के लिए चित्र को ओवरफ़्लो करें, और यदि आप
डॉक्यूमेंट में सभी इमेजेज की चौड़ाई जानते हैं, तो आप इस तरह से, DIV
के लिए एक न्यूनतम चौड़ाई जोड़ सकते हैं:
div.figure {
min-width: 150px;
}
शाम के सूरज में सेंट ट्रोपेज एवं इसका फोर्ट
इसके बजाय इमेज को चित्र की चौड़ाई में स्केल करने के लिए (जैसा कि
हमने दाईं ओर की इमेज के साथ किया है), आप ऊपर दिए हुए एचटीएमएल 5
उदाहरण के समान एक CLASS एट्रिब्यूट और सीएसएस नियम जोड़ सकते हैं।
यहाँ हमारा उपयोग किया गया मार्क-अप है:
<div class=figure>
<p><img class=scaled src="st-tropez.jpg"
alt="St. Tropez">
<p>शाम के सूरज में सेंट ट्रोपेज एवं इसका फोर्ट
</div>
अंतिम नियम एकमात्र जोड़ है: यह इमेज को DIV के अंदर (बॉर्डर एवं
पैडिंग के अंदर का क्षेत्र) के जितना चौड़ा बनाता है ।
एचटीएमएल4 में शीर्ष पर कैप्शन डालना
कैप फेरैट के पास भूमध्य सागर
शीर्ष पर कैप्शन रखने के लिए, पिछले वर्गों से स्टाइल शीट में इन
नियमों को जोड़ें:
div.figure {
display: table;
}
div.figure p + p {
display: table-caption;
caption-side: top;
}
'+' एक नियम का कारण है एक P से मेल खाता है जो एक और P का अनुसरण
करता है। इस मामले में इसका मतलब है कि यह चित्र के दूसरे P से मेल
खाता है, जिसमें वह कैप्शन है।
(यह तकनीक 2003 से पहले के कुछ ब्राउज़रों में बग को उजागर कर सकती
है, खासकर जब इमेज को स्केल करने के साथ जोड़ दिया जाता है, जैसा कि
मैंने यहां किया)।
पहले की तरह, इस पृष्ठ पर चित्रों के चारों ओर लगाने के लिए हमने
जो ग्रे बॉर्डर चुना, वह इस तकनीक से केवल इमेज के आसपास होगा। चित्र
और कैप्शन के चारों ओर रखने के लिए , इन नियमों को जोड़ें:
