रिस्पॉन्सिव इमेज

एक-पंक्ति का समाधान

max-width: 100% इमेज को अपने पेरेंट से बाहर निकलने से रोकता है, जबकि height: auto सिकुड़ते समय उसका आस्पेक्ट रेशियो बनाए रखता है।

एक यूनिवर्सल इमेज रूल

कई प्रोजेक्ट इसे सीएसएस रीसेट के पास वैश्विक रूप से जोड़ते हैं।

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

क्रॉपिंग के लिए object-fit

जब <img> की width/height तय हो, object-fit: cover उसे बिना खींचे बॉक्स भरने के लिए क्रॉप करता है — background-size: cover जैसा, पर <img> टैग के लिए।