रिस्पोंसिव वेबपेज डिजाइन - इमेज

width गुण का उपयोग करके

यदि width गुण को प्रतिशत में निर्धारित किया जाए और ऊंचाई को "auto" कर दिया जाए, तो छवि आकार के अनुसार बढ़ा या छोटा हो सकती है:

इस्टेंस

img {
  width: 100%;
  height: auto;
}

</picture>

ध्यान दें कि उपरोक्त उदाहरण में, छवि अपने मूल आकार से बड़ा हो सकती है। अधिकांश मामलों में, बेहतर समाधान यह है कि max-width गुण

max-width गुण का उपयोग करके

यदि max-width गुण विन्यास 100% के रूप में हो, तो छवि के आकार को आवश्यकता के अनुसार छोटा किया जाएगा, लेकिन वह अपने मूल आकार से बड़ा नहीं होगा:

इस्टेंस

img {
  max-width: 100%;
  height: auto;
}

</picture>

इस उदाहरण वेब पृष्ठ में छवि जोड़ें

इस्टेंस

img {
  width: 100%;
  height: auto;
}

</picture>

पृष्ठभूमि छवि

पृष्ठभूमि छवि भी आकार संचालन और तयारी के अनुसार प्रतिसाद दे सकती है।

हमने दिखाए इस तीन अलग-अलग तरीके हैं:

1. यदि background-size गुण विन्यास "contain" के रूप में होने पर, पृष्ठभूमि छवि जगह निहित करने के लिए बढ़ा दी जाएगी और वहां जगह अनुरूप करने की कोशिश करेगी। लेकिन छवि अपने आकार की अनुपात बनाए रखेगी (छवि आकार के आयामों के बीच का संबंध):

यह CSS कोड है:

इस्टेंस

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid red;
}

</picture>

2. यदि background-size परिवर्तनीय को "100% 100%" रखा गया है, तो पृष्ठभूमि चित्र को पूरे सामग्री क्षेत्र को कवर करने के लिए फैलाया जाएगा:

यह CSS कोड है:

इस्टेंस

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: 100% 100%;
  border: 1px solid red;
}

</picture>

3. यदि background-size परिवर्तनीय को "cover" रखा है, तो पृष्ठभूमि चित्र को पूरे सामग्री क्षेत्र को कवर करने के लिए स्केल किया जाएगा।चूँकि "cover" मूल्य अनुपात को बनाए रखता है, इसलिए इससे पृष्ठभूमि चित्र के किसी हिस्से को बाहर कर दिया जा सकता है:

यह CSS कोड है:

इस्टेंस

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: cover;
  border: 1px solid red;
}

</picture>

विभिन्न उपकरणों के लिए अलग-अलग चित्र तैयार करें

बड़े कंप्यूटर स्क्रीन पर बड़े चित्र का शानदार दिखावा होता है, लेकिन छोटे उपकरणों पर इसका उपयोग नहीं होता।चित्र को किसी कारण छोटा करते समय बड़े चित्र को क्यों लोड करते हैं?भार कम करने या किसी अन्य कारण के लिए, आप मीडिया क्वेरी का उपयोग करके विभिन्न उपकरणों पर विभिन्न चित्रों को दिखाया जा सकता है。

यह एक बड़ा चित्र और एक छोटा चित्र है, जो विभिन्न उपकरणों पर दिखाया जाता है:

इस्टेंस

/* 400 पिक्सल से कम आकार के लिए: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* 400 पिक्सल या बड़े आकार के लिए: */
@media only screen and (min-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

</picture>

आप मीडिया क्वेरी का उपयोग कर सकते हैं min-device-width बजाय min-width उपकरण चौड़ाी की जाँच करने के लिए बजाय ब्राउज़र चौड़ाी को, और तब जब आप ब्राउज़र विंडो के आकार को समायोजित करते हैं, तो चित्र बदल नहीं पाते:

इस्टेंस

/* 400 पिक्सल से कम उपकरणों के लिए: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* 400 पिक्सल और बड़े उपकरणों के लिए: */
@media only screen and (min-device-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

</picture>

HTML5 <picture> एलीमेंट

HTML5 में <picture> एलीमेंट को प्रयोग करके आप कई चित्रों को परिभाषित कर सकते हैं。

ब्राउज़र समर्थन

38.0 13 38.0 9.1 25.0

<picture> एलीमेंट का काम के समान है <video> और <audio> एलीमेंट।हमने विभिन्न स्रोतों को सेट किया है और पहली प्राथमिकता से मेल होने वाला पहला स्रोत वर्तमान उपयोग में हैः

इस्टेंस

<picture>
  इस्टेंस
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
<img src="img_flowers.jpg" alt="Flowers">

</picture>

स्वयं एक प्रयास कीजिए srcset

अट्रिब्यूट अनिवार्य है, यह इमेज के स्रोत को परिभाषित करता है。 अट्रिब्यूट वैकल्पिक है, यह media CSS @media रूल में पाए जाने वाले मीडिया क्वेरी

सूचना:आपको नज़र आने वाले मीडिया क्वेरी <picture> एलिमेंट के ब्राउज़र डिफ़ाइनेशन <img> एलिमेंट