कैसे करें - उत्तरदायी छवियां
CSS की मदद से रिस्पॉन्सिव इमेज बनाने का तरीका जानें।
स्क्रीन के आकार में फिट होने के लिए प्रतिक्रियाशील छवियां स्वचालित रूप से समायोजित हो जाएंगी।
प्रतिक्रियाशील प्रभाव देखने के लिए ब्राउज़र विंडो का आकार बदलें:
रिस्पॉन्सिव इमेज कैसे बनाएं
चरण 1) HTML जोड़ें:
उदाहरण
<img src="nature.jpg" alt="Nature" class="responsive">
चरण 2) सीएसएस जोड़ें:
यदि आप चाहते हैं कि छवि प्रतिक्रियात्मकता पर ऊपर और नीचे दोनों को स्केल करे, तो CSS widthसंपत्ति को 100% और heightऑटो पर सेट करें:
उदाहरण
.responsive {
width: 100%;
height: auto;
}
If you want an image to scale down if it has to, but never scale up to be larger than its original size, use max-width: 100%:
Example
.responsive {
max-width: 100%;
height: auto;
}
If you want to restrict a responsive image to a maximum size, use the max-width property, with a
pixel value of your choice:
Example
.responsive {
width: 100%;
max-width:
400px;
height: auto;
}
Go to our CSS Images Tutorial to learn more about how to style images.
Go to our CSS RWD Tutorial to learn more about responsive web design.