- CSS images properties in Hindi
- CSS width Property in Hindi
- Image height Property in Hindi
Introduction To Image Properties
CSS के द्वारा image को customize कर सकते है | css की कुछ properties का use कर image को customize किया जाता है | image properties की list निचे दी जा रही है।
- width
- height
- border
width Property
जब भी हम image का size increase करना चाहते है | तो width property का use करते है | और image का width px ( pixel ) मे दे सकते है | या % ( percentage ) मे दे सकते है |
<html> <head> <style type="text/css"> #img1 { width: 500px; } .img1 { width: 50%; } </style> </head> <body> <img src="image.jpg" id="img1"> <img src="image.jpg" class="img1"> </body> </html>
height Property
यहाँ पर height property के द्वारा image का height define किया जाता है | image का height pixel मे भी दे सकते है | और percentage मे भी दे सकते है | निचे example दिया गया है |
<html> <head> <style type="text/css"> #img1 { width: 500px; height: 500px;} .img1 { width: 50%; height: 50%;} </style> </head> <body> <img src="image.jpg" id="img1"> <img src="image.jpg" class="img1"> </body> </html>
Notice :- जब भी हम image का width या height percentage मे देते है | तो अपने parent के according area कवर कर लेता है | और जब भी percentage मे value दी जाती है | तो maximum value १००% तक ही दे सकते है |
border Property
यहाँ पर border property का use border apply करने के लिए किया जाता है | और हमारे पास चार प्रकार की border available है | जिसको हम निचे दे रहे है | लेकिन उससे पहले हम border property के syntax को समझ लेते है |
जब भी हम image के ऊपर border apply करना चाहते है | तो हमे कुछ rule को fallow करना पड़ता है | जैसे सबसे पहले हमे border की मोटाई देनी होती है | उसके बाद border का नाम देते है | फिर border का color देते है | अगर हम color की value नही देते है | तो by default color black होता है |
- dotted – इस value से हमारा Border dotes मे दिखाई देता है |
- dashed – इस value से हमारा Border dashes मे दिखाई देता है |
- double – इस value से हमारे image के ऊपर double lines apply हो जाती है |
- solid – इस value से हमारे image के ऊपर single लाइन मे एक border apply हो जाती है
<html> <head> <style type="text/css"> #img1 { width: 300px; height: 200px; border: 5px solid red; } .img1 { width: 30%; height: 20%; border: 5px dashed green; } #img2 { width: 300px; height: 200px; border: 5px dotted yellow; } .img2 { width: 30%; height: 20%; border: 5px double brown; } </style> </head> <body> <img src="image.jpg" id="img1"> <img src="image.jpg" id="img2"> <img src="image.jpg" class="img1"> <img src="image.jpg" class="img2"> </body> </html>
CSS Text Properties | CSS Color Properties |
Previous | Next |
---|