छवि को HTML के सटीक width और height एट्रिब्यूट दें, फिर CSS का उपयोग करके उसकी प्रदर्शित चौड़ाई को प्रतिक्रियाशील और ऊँचाई को स्वचालित बनाएँ। ये आयाम छवि को उस प्रदर्शित आकार में बाँधे बिना पहले से उसका आस्पेक्ट रेशियो बताते हैं। MDN: मल्टीमीडिया छवियाँ

यह मार्गदर्शिका उस व्यक्ति के लिए है जो Mac पर HTML पेज संपादित कर रहा है और चाहता है कि छवि लोड होने से पहले आनुपातिक जगह आरक्षित रखते हुए अपने कंटेनर के अनुसार आकार बदले। उदाहरण में एक स्वतंत्र अमूर्त ग्राफ़िक है, इसलिए आप कोई एसेट डाउनलोड किए बिना आकार बदलने का व्यवहार आज़मा सकते हैं।

आकार तय किए बिना आयाम जगह कैसे आरक्षित कर सकते हैं?

छवि के संसाधन आयाम होते हैं, जैसे 1200 बाय 800, और उसका प्रदर्शित आकार लेआउट से तय होता है। ये संख्याएँ अलग हो सकती हैं। HTML आयाम एट्रिब्यूट आकार के संकेत देते हैं; आपकी स्टाइलशीट प्रदर्शित चौड़ाई और ऊँचाई को बदल सकती है। HTML Standard इन एट्रिब्यूट को auto 1200 / 800 के रूप में एक पसंदीदा आस्पेक्ट रेशियो से भी जोड़ता है। HTML Standard: एम्बेडेड सामग्री और छवियों के एट्रिब्यूट

1200-बाय-800 संसाधन का अनुपात 3:2 है। लेआउट में प्रदर्शित चौड़ाई तय होते ही, संसाधन का लोड होना पूरा होने से पहले ब्राउज़र आनुपातिक ऊँचाई की गणना कर सकता है। MDN छवि से जुड़े लेआउट शिफ़्ट कम करने के लिए प्रतिक्रियाशील CSS के साथ दोनों आयाम देने की सलाह देता है। MDN: मल्टीमीडिया छवियाँ

व्यवहार में ज़िम्मेदारियों का बँटवारा सीधा है: HTML संसाधन के आयाम बताता है और CSS बताता है कि वह पेज में कैसे फिट होगा। इन दोनों विवरणों में तालमेल रखें। आयाम देना तब भी उपयोगी है जब छवि कभी अपने मूल आकार में दिखाई न दे।

तय करें कि छवि को अपना कंटेनर भरना चाहिए या नहीं

जब छवि को कंटेनर की उपलब्ध पूरी चौड़ाई भरनी हो, तो नीचे दिया CSS अंश इस्तेमाल करें। इसमें माना गया है कि छवि की क्लास responsive-image है और उसके आयाम एट्रिब्यूट सटीक हैं:

.responsive-image {
  display: block;
  width: 100%;
  height: auto;
}

अगर छवि को ज़रूरत पड़ने पर छोटा होना चाहिए, लेकिन अधिक जगह होने पर घोषित चौड़ाई बनाए रखनी चाहिए, तो यह वैकल्पिक अंश इस्तेमाल करें:

.responsive-image {
  display: block;
  max-width: 100%;
  height: auto;
}

दूसरा तरीका MDN में दर्ज है और छवि को संकरे कंटेनर के भीतर रखने के लिए है। इस सरल लेआउट में width: 100% कंटेनर को पूरा भरता है, जबकि max-width: 100% अधिकतम सीमा तय करता है। दोनों तरीकों में height: auto रखें, ताकि ऊँचाई HTML में दी गई ऊँचाई पर स्थिर रहने के बजाय अनुपात के अनुसार बदल सके। MDN: मल्टीमीडिया छवियाँ

अपने Mac पर पूरा प्रतिक्रियाशील-छवि पेज आज़माएँ

TextEdit खोलें, File > New चुनें, फिर Format > Make Plain Text चुनें। नीचे दिया पूरा दस्तावेज़ पेस्ट करें। इसे shape-demo.html नाम से सेव करें; अगर TextEdit पूछे कि कौन-सा एक्सटेंशन इस्तेमाल करना है, तो Use .html चुनें। HTML फ़ाइल बनाने के लिए Apple ने ये चरण बताए हैं। Apple: Mac पर TextEdit में HTML दस्तावेज़ों के साथ काम करें

इस दस्तावेज़ में CSS और एक एन्कोड किया हुआ SVG शामिल है, जिसमें नया वृत्त और आयत वाला संयोजन है। इंस्टॉल करने के लिए कोई अतिरिक्त फ़ाइल या पैकेज नहीं है। संसाधन और छवि एलिमेंट, दोनों में 1200 बाय 800 आयाम घोषित हैं।

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shape sizing demo</title>
  <style>
    body {
      margin: 0;
      padding: 24px;
      font-family: system-ui, sans-serif;
      line-height: 1.5;
      color: #24343b;
    }

    main {
      max-width: 900px;
      margin: 0 auto;
    }

    .responsive-image {
      display: block;
      width: 100%;
      height: auto;
      background: #edf2f4;
    }
  </style>
</head>
<body>
  <main>
    <h1>Shape study A</h1>
    <p>Resize the window to change the composition's displayed size.</p>
    <img
      class="responsive-image"
      width="1200"
      height="800"
      alt="A blue circle beside an amber rounded rectangle."
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800' viewBox='0 0 1200 800'%3E%3Crect width='1200' height='800' fill='%23edf2f4'/%3E%3Ccircle cx='360' cy='400' r='180' fill='%234b8090'/%3E%3Crect x='660' y='220' width='300' height='360' rx='40' fill='%23d6a96b'/%3E%3C/svg%3E">
    <p>Marker B: this paragraph follows the image in normal document flow.</p>
  </main>
</body>
</html>

सेव की गई फ़ाइल को ब्राउज़र में खोलें और विंडो की चौड़ाई घटाएँ। संयोजन आनुपातिक रूप से छोटा होना चाहिए और Marker B उसके नीचे रहना चाहिए। विंडो चौड़ी करने पर संयोजन तब तक बड़ा होगा, जब तक उदाहरण का कंटेनर 900-पिक्सेल की अधिकतम सीमा तक न पहुँच जाए। यह अधिकतम सीमा पेज डिज़ाइन का एक उदाहरण है; जगह आरक्षित करने की तकनीक की यह कोई आवश्यकता नहीं है।

एम्बेडेड संसाधन तुरंत लोड होता है, इसलिए यह उदाहरण प्रतिक्रियाशील आकार दिखाता है, स्पष्ट रूप से देर से होने वाला डाउनलोड नहीं। इसके एन्कोड किए गए SVG को पार्स किया गया और Python से उसके आयाम जाँचे गए; नीचे दी गई गणनाएँ भी चलाई गईं। तैयारी के दौरान ब्राउज़र में रेंडरिंग नहीं की गई।

पेज को किसी अन्य संसाधन के लिए ढालने हेतु src का मान बदलें और दोनों HTML आयाम उस संसाधन से मिलाएँ। इन एट्रिब्यूट में 1200px के बजाय 1200 जैसे इकाई रहित पूर्णांक इस्तेमाल करें। MDN छवि के आयामों के लिए यही प्रारूप बताता है। MDN: छवि एम्बेड एलिमेंट

ब्राउज़र को कितनी जगह आरक्षित करनी चाहिए?

इस सरल लेआउट में, जहाँ छवि पर कोई बॉर्डर या पैडिंग नहीं है, अपेक्षित ऊँचाई की गणना इस तरह करें:

प्रदर्शित ऊँचाई = प्रदर्शित चौड़ाई × संसाधन की ऊँचाई ÷ संसाधन की चौड़ाई

उदाहरण के 1200-बाय-800 आयामों से ये उदाहरणात्मक नतीजे मिलते हैं। चौड़ाइयाँ छवि के कंटेंट बॉक्स की हैं, पूरी ब्राउज़र विंडो की नहीं।

प्रदर्शित छवि की चौड़ाई आनुपातिक ऊँचाई
300 CSS पिक्सेल 200 CSS पिक्सेल
600 CSS पिक्सेल 400 CSS पिक्सेल
900 CSS पिक्सेल 600 CSS पिक्सेल

यह गणना समस्या पहचानने में भी उपयोगी है। मान लें कि वास्तविक संसाधन 1200 बाय 800 है, लेकिन HTML में गलती से 1200 बाय 600 घोषित है। 600 पिक्सेल की प्रदर्शित चौड़ाई पर, घोषित अनुपात 300 पिक्सेल ऊँचाई बताता है; वास्तविक अनुपात के अनुसार ऊँचाई 400 पिक्सेल होनी चाहिए। प्राकृतिक अनुपात उपलब्ध होने पर संभावित 100-पिक्सेल का सुधार करना पड़ेगा।

यह सुधार अनुपात के संकेत में auto वाले हिस्से के कारण होता है: प्राकृतिक आस्पेक्ट रेशियो वाली छवि उपलब्ध होने पर उसी अनुपात का उपयोग करती है। इसलिए सही एट्रिब्यूट ज़रूरी हैं, भले ही स्टाइलशीट सही हो। CSS विनिर्देश दिए गए अनुपात और बदले जा सकने वाले एलिमेंट के प्राकृतिक अनुपात के बीच यह अंतर परिभाषित करता है। CSS Box Sizing Module Level 4: पसंदीदा आस्पेक्ट रेशियो

इसके बजाय CSS aspect-ratio का उपयोग कब करना चाहिए?

जब आपका लेआउट जानबूझकर छवि बॉक्स का आकार तय करता हो, तब स्पष्ट CSS अनुपात इस्तेमाल करें। उदाहरण के लिए, चौकोर टाइल की ज़रूरत पूरी 3:2 संरचना को आनुपातिक रूप से दिखाने से अलग है।

नीचे दिया गया CSS अंश पूरे उदाहरण में लगाने के लिए है। मौजूदा .responsive-image नियम को इससे बदलें:

.responsive-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #edf2f4;
}

यहाँ aspect-ratio: 1 / 1 चौकोर बॉक्स का अनुरोध करता है। चौड़ाई प्रतिक्रियाशील रहती है और स्वचालित ऊँचाई की गणना उसी चौड़ाई से होती है। आकार तय करने में पसंदीदा आस्पेक्ट रेशियो का प्रभाव पड़ने के लिए कम से कम एक आयाम स्वचालित होना चाहिए; दोनों आयाम स्पष्ट रूप से तय करने पर उसकी यह भूमिका समाप्त हो जाती है। MDN: aspect-ratio

object-fit: contain घोषणा पूरी संरचना को चौकोर बॉक्स के भीतर दिखाती है और जहाँ आकृतियों का संसाधन बॉक्स को पूरा नहीं भरता, वहाँ खाली जगह छोड़ती है। मान को cover में बदलने पर चौकोर बॉक्स भर जाएगा, लेकिन संरचना का कुछ हिस्सा कट जाएगा। यह व्यवहार सोच-समझकर चुनें: क्रॉप करने से छवि के अर्थपूर्ण हिस्से हट सकते हैं। MDN: object-fit

अगर ऐसा अस्थायी अनुपात चाहिए जो संसाधन के प्राकृतिक अनुपात को प्राथमिकता दे, तो CSS aspect-ratio: auto 3 / 2 जैसे मान का भी समर्थन करता है। संसाधन का अनुपात अलग होने पर लोड होने के बाद बॉक्स का अनुपात बदल सकता है। auto के बिना दिया गया अनुपात इसके बजाय लेआउट का पसंदीदा आकार बताता है। CSS Box Sizing Module Level 4: पसंदीदा आस्पेक्ट रेशियो

छवि अब भी खिसकती या खिंचती हो, तो क्या जाँचें?

संसाधन और लेआउट को इस क्रम में जाँचें:

  1. दोनों HTML आयामों की पुष्टि करें। उन्हें संसाधन का सही वर्णन करना चाहिए। सही चौड़ाई के साथ गलत ऊँचाई देने पर भी अनुपात गलत मिलेगा।
  2. लागू CSS ऊँचाई जाँचें। आनुपातिक उदाहरण में यह auto होनी चाहिए। कोई दूसरा मेल खाता नियम निश्चित ऊँचाई तय कर सकता है।
  3. प्रदर्शित चौड़ाई जाँचें। जगह आरक्षित करने की गणना लेआउट से तय हुई चौड़ाई पर निर्भर करती है। ब्राउज़र का आकार बदलने पर यह चौड़ाई और उसकी आनुपातिक ऊँचाई जानबूझकर बदलती है।
  4. स्पष्ट अनुपात वाले नियम जाँचें। चौकोर CSS अनुपात और प्राकृतिक 3:2 अनुपात अलग-अलग आकार की मंशा बताते हैं।
  5. छवि के फ़िट होने की जाँच अलग से करें। contain और cover यह तय करते हैं कि संसाधन अपने बॉक्स में कैसे फिट होगा; वे बॉक्स के अनुपलब्ध आयाम नहीं देते।

ये जाँचें एलिमेंट के बॉक्स, उसके पसंदीदा अनुपात और उसमें रेंडर किए गए संसाधन के बीच के अंतर पर आधारित हैं। MDN की aspect-ratio मार्गदर्शिका बताती है कि स्पष्ट आयाम आनुपातिक आकार को कैसे प्रभावित करते हैं, जबकि उसका object-fit संदर्भ फ़िट करने और क्रॉप करने का विवरण देता है। MDN: आस्पेक्ट रेशियो समझना और तय करना, MDN: object-fit

ब्राउज़र समर्थन की भी एक सीमा है। MDN के अनुसार CSS aspect-ratio प्रॉपर्टी सितंबर 2021 से ब्राउज़रों में व्यापक रूप से उपलब्ध है। इससे हर पुराने ब्राउज़र में समर्थन की पुष्टि नहीं होती, और न ही HTML आयाम मैप करने के हर व्यवहार के लिए यह संगतता की तारीख है। अगर आपकी आवश्यकताओं में कोई पुराना ब्राउज़र शामिल है, तो दस्तावेज़ की संगतता जानकारी देखें। MDN: aspect-ratio

सामान्य आनुपातिक छवि के काम के लिए, HTML के सटीक आयाम और प्रतिक्रियाशील CSS से शुरुआत करें। जब पेज को किसी खास बॉक्स आकार की ज़रूरत हो, तब स्पष्ट CSS अनुपात इस्तेमाल करें। इन विकल्पों से आप इच्छित जगह आरक्षित कर सकते हैं और प्रदर्शित आकार को पेज लेआउट के अनुसार बदलने दे सकते हैं।

स्रोत