सीएसएस का उपयोग करके ब्राउज़र आकार के साथ छवियों का स्वचालित आकार बदलें

जब आप अपने ब्राउज़र विंडो का आकार बदलते हैं तो आप चाहते हैं कि आपकी छवियां स्वचालित रूप से आकार बदलें, लेकिन प्रदान किया गया कोड काम नहीं कर रहा है. आइए एक समाधान की जांच करें।

छवियों को लचीला बनाने के लिए, आपको उनमें अधिकतम-चौड़ाई: 100% और ऊंचाई: ऑटो जोड़ना होगा। हालाँकि, IE8 में एक बग है जहाँ यह काम नहीं करता है। इसे ठीक करने के लिए, IE8 के लिए width: auto\\9 जोड़ें।

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

img टैग का उपयोग करके जोड़ी गई कोई भी छवि अब स्वचालित रूप से आकार बदल जाएगी।

उदाहरण के लिए, यहां एक उदाहरण JSFiddle है जिसके लिए जावास्क्रिप्ट की आवश्यकता नहीं है। यह क्रोम, फ़ायरफ़ॉक्स और IE के नवीनतम संस्करणों के साथ संगत है (परीक्षण के आधार पर)।