उत्तरदायी वेब डिज़ाइन - छवियां
यह देखने के लिए ब्राउज़र विंडो का आकार बदलें कि छवि पृष्ठ में कैसे फिट होती है।
चौड़ाई संपत्ति का उपयोग करना
अगर widthप्रॉपर्टी को प्रतिशत पर सेट किया गया है और heightप्रॉपर्टी को "ऑटो" पर सेट किया गया है, तो इमेज रिस्पॉन्सिव और स्केल अप और डाउन होगी:
उदाहरण
img {
width: 100%;
height: auto;
}
ध्यान दें कि ऊपर के उदाहरण में, छवि को उसके मूल आकार से बड़ा किया जा सकता है। एक बेहतर समाधान, कई मामलों में,
max-widthइसके बजाय संपत्ति का उपयोग करना होगा।
अधिकतम-चौड़ाई वाली संपत्ति का उपयोग करना
यदि max-widthसंपत्ति को 100% पर सेट किया गया है, तो छवि को छोटा कर दिया जाएगा यदि उसे करना है, लेकिन कभी भी अपने मूल आकार से बड़ा नहीं होना चाहिए:
उदाहरण
img {
max-width: 100%;
height: auto;
}
उदाहरण वेब पेज में एक छवि जोड़ें
उदाहरण
img {
width: 100%;
height: auto;
}
पृष्ठभूमि छवियों
पृष्ठभूमि छवियां आकार बदलने और स्केलिंग का भी जवाब दे सकती हैं।
यहां हम तीन अलग-अलग तरीके दिखाएंगे:
1. यदि background-sizeगुण "शामिल" पर सेट है, तो पृष्ठभूमि छवि स्केल हो जाएगी, और सामग्री क्षेत्र में फ़िट होने का प्रयास करेगी। हालांकि, छवि अपने पहलू अनुपात (छवि की चौड़ाई और ऊंचाई के बीच आनुपातिक संबंध) को बनाए रखेगी:
यहाँ सीएसएस कोड है:
उदाहरण
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
2. यदि background-sizeसंपत्ति "100% 100%" पर सेट है, तो पृष्ठभूमि छवि संपूर्ण सामग्री क्षेत्र को कवर करने के लिए फैल जाएगी:
यहाँ सीएसएस कोड है:
उदाहरण
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
3. यदि background-sizeसंपत्ति "कवर" पर सेट है, तो पृष्ठभूमि छवि पूरे सामग्री क्षेत्र को कवर करने के लिए स्केल हो जाएगी। ध्यान दें कि "कवर" मान पक्षानुपात को बनाए रखता है, और पृष्ठभूमि छवि के कुछ भाग को क्लिप किया जा सकता है:
यहाँ सीएसएस कोड है:
उदाहरण
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
विभिन्न उपकरणों के लिए अलग-अलग छवियां
बड़ी कंप्यूटर स्क्रीन पर एक बड़ी छवि सही हो सकती है, लेकिन एक छोटे डिवाइस पर बेकार। एक बड़ी छवि को लोड क्यों करें जब आपको इसे वैसे भी स्केल करना पड़े? लोड को कम करने के लिए, या किसी अन्य कारण से, आप विभिन्न उपकरणों पर विभिन्न छवियों को प्रदर्शित करने के लिए मीडिया क्वेरी का उपयोग कर सकते हैं।
यहां एक बड़ी छवि और एक छोटी छवि है जो विभिन्न उपकरणों पर प्रदर्शित की जाएगी:
उदाहरण
/* For width smaller than 400px: */
body {
background-image:
url('img_smallflower.jpg');
}
/*
For width 400px and larger: */
@media only screen and (min-width: 400px)
{
body {
background-image: url('img_flowers.jpg');
}
}
min-device-widthआप इसके बजाय
मीडिया क्वेरी का उपयोग कर सकते हैं min-width, जो ब्राउज़र की चौड़ाई के बजाय डिवाइस की चौड़ाई की जांच करती है। तब जब आप ब्राउज़र विंडो का आकार बदलते हैं तो छवि नहीं बदलेगी:
उदाहरण
/* For devices smaller than 400px: */
body {
background-image:
url('img_smallflower.jpg');
}
/*
For devices 400px and larger: */
@media only screen and (min-device-width: 400px)
{
body {
background-image: url('img_flowers.jpg');
}
}
एचटीएमएल <चित्र> तत्व
HTML <picture>तत्व वेब डेवलपर्स को छवि संसाधनों को निर्दिष्ट करने में अधिक लचीलापन देता है।
The most common use of the <picture>
element will be for images used in responsive designs. Instead of having one
image that is scaled up or down based on the viewport width, multiple images can
be designed to more nicely fill the browser viewport.
The <picture> element works similar to the <video> and
<audio> elements. You set up different sources, and the first source that fits the
preferences is the one being used:
Example
<picture>
<source srcset="img_smallflower.jpg" media="(max-width:
400px)">
<source srcset="img_flowers.jpg">
<img
src="img_flowers.jpg" alt="Flowers">
</picture>
The srcset attribute is required, and defines the source of the image.
The media attribute is optional, and accepts the media queries you find in
CSS @media rule.
You should also define an <img> element for browsers that do not support the
<picture> element.