<img> टैग पर width और height एट्रिब्यूट सेट करने से,
लेआउट में बदलाव रोकने में मदद मिलती है. इस जानकारी की मदद से ब्राउज़र, इमेज के लिए सही जगह रिज़र्व कर पाता है.
widthऔरheightएट्रिब्यूट सेट करें: इन एट्रिब्यूट की वैल्यू इस तरह सेट करें कि वे इमेज के डाइमेंशन (यानी कि उसका ओरिजनल साइज़) से मैच करें, न कि जिस डाइमेंशन पर इमेज को दिखाया जाएगा.इमेज की स्टाइल में ज़रूरत के मुताबिक बदलाव करें: इमेज की मौजूदा स्टाइल के आधार पर,
widthऔरheightएट्रिब्यूट जोड़ने पर, इमेज अलग तरह से रेंडर हो सकती है. कई मामलों में, मौजूदा स्टाइल मेंheight: autoयाwidth: autoको जोड़कर, इसे ठीक किया जा सकता है.
| पिछली सीएसएस स्टाइल | इसमें बदलें |
|---|---|
| img { width: 100%; } | img { width: 100%; height: auto; } |
| img { max-width: 100%; } | img { max-width: 100% height: auto; } |
| img { height: 100%; } | img { height: 100%; width: auto } |
एचटीएमएल
<img width="267" height="400" src="dog.jpg">