HTML में छवि की चौड़ाई

डिफ़ॉल्ट रूप से, छवियाँ उनके वास्तविक आकार में दिखाई देती हैं। उदाहरण के लिए, वह स्माइल छवि जिसे हमने ऊपर दिखाया था, का वास्तविक आकार 130 बाय 130 पिक्सेल है और ब्राउज़र में हमें छवि का वही आकार दिखाई देता है।

इच्छानुसार छवि का आकार बदला जा सकता है, उसकी चौड़ाई सेट करके। यह विशेषता width की सहायता से किया जाता है।

चलिए उदाहरण के लिए हमारी छवि की चौड़ाई 100 पिक्सेल सेट करते हैं। इसके लिए विशेषता width का मान 100 संख्या दर्शाते हैं, इस प्रकार:

htmlwidth="100"

स्क्रीन पर छवि का आकार क्या होगा? आप सोच सकते हैं कि निम्नलिखित: चौड़ाई 100 पिक्सेल, जैसा हमने सेट किया, और वास्तविक ऊँचाई 130, क्योंकि हमने इसे सेट नहीं किया। वास्तव में, ऐसा नहीं होगा।

चौड़ाई वास्तव में 100 पिक्सेल होगी, लेकिन ऊँचाई स्वयं को इस तरह समायोजित करेगी कि छवि के अनुपात विकृत न हों, यानी वह भी 100 पिक्सेल हो जाएगी।

चलिए इसे रन करके सत्यापित करते हैं:

html<img src="smile.png" width="100">

Результат: