कैसे बनाएं: रिस्पांसिव छवि
- पिछला पृष्ठ हैडर फ़ोटो
- अगला पृष्ठ सेंटर इमेज
CSS के जरिए रिस्पांसिव छवि का इस्तेमाल सीखें。
रिस्पांसिव छवि स्वचालित रूप से स्क्रीन आकार के अनुसार समायोजित होगी。
ब्राउज़र विंडो का आकार समायोजित करें ताकि प्रतिक्रिया प्रभाव देखें:
कैसे रिस्पांसिव छवि बनाएं
पहला कदम - HTML जोड़ें:
<img src="nature.jpg" alt="Nature" class="responsive">
दूसरा कदम - CSS जोड़ें:
यदि आप चाहते हैं कि छवि की रिस्पांसिवता एक साथ बढ़ने और कम होने दो, तो CSS का width गुण सेट करें 100%,height सेट करें auto:
उदाहरण
.responsive {
width: 100%;
height: auto;
}
यदि आप चाहते हैं कि छवि आवश्यकता पड़े पर कम हो जाए, लेकिन उसके मूल आकार से अधिक न बढ़े, तो इस्तेमाल करें max-width: 100%:
उदाहरण
.responsive {
max-width: 100%;
height: auto;
}
यदि आप रिस्पांसिव छवि को अधिकतम आकार से सीमित करना चाहते हैं, तो इस्तेमाल करें max-width गुण और आप चुने हुए पिक्सल मान:
उदाहरण
.responsive {
width: 100%;
max-width: 400px;
height: auto;
}
संबंधित पृष्ठ
शिक्षा:CSS इमेज
- पिछला पृष्ठ हैडर फ़ोटो
- अगला पृष्ठ सेंटर इमेज
