# रिस्पॉन्सिव इमेज — सीएसएस

Source: https://www.geekswithgeeks.com/hi/css/css-responsive-images

> इमेज जो अपने कंटेनर से बाहर निकलने की बजाय सुंदर ढंग से स्केल हों।

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

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

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

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

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

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

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