CSS max-width: 100% और height: auto का उपयोग करके इमेज को रेस्पॉन्सिव (उत्तरदायी) बनाया जा सकता है। इससे इमेज अपने कंटेनर से चौड़ी नहीं होगी और छोटे स्क्रीन पर स्वचालित रूप से स्केल डाउन हो जाएगी।
उदाहरण
नीचे दिए गए उदाहरण में, इमेज को रेस्पॉन्सिव बनाने के लिए max-width: 100% और height: auto लागू किया गया है।
<!DOCTYPE html>
<html>
<head>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg" alt="Online Compiler" width="300" height="300">
</body>
</html>
कैसे काम करता है:
max-width: 100%- इमेज की अधिकतम चौड़ाई उसके पैरेंट कंटेनर की चौड़ाई तक सीमित करता हैheight: auto- ऊंचाई को अनुपात में स्वचालित रूप से समायोजित करता है (एस्पेक्ट रेशियो बनाए रखता है)
नोट: यह रेस्पॉन्सिव इमेज का सबसे सरल और व्यापक रूप से उपयोग किया जाने वाला तरीका है। width: 100% का उपयोग न करें क्योंकि यह छोटी इमेज को जबरदस्ती खींच देगा।
