CSS in Hindi – Introduction To Image Properties

by
  • 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 होता है |

  1. dotted – इस value से हमारा Border dotes मे दिखाई देता है |
  2. dashed – इस value से हमारा Border dashes मे दिखाई देता है |
  3. double – इस value से हमारे image के ऊपर double lines apply हो जाती है |
  4. 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