इस Tutorial में हम आपको CSS Image Property की पूरी जानकारी देंगे. अध्ययन की सुविधा के लिए हमने इस Tutorial को कई भागों में बांटा हैं.
Table of Content
CSS Image Property का परिचय
आप एक वेबपेज में Image की Importance क्या होती हैं? अच्छी तरह से जानते होंगे. इसलिए CSS द्वारा भी Image को Optimize करने के लिए CSS Image Property को बनाया गया हैं. .
CSS Image Property से आप Webpage में Insert Images का Size, Border, Opacity आदि कि Setting कर सकते हैं.
Images का Alignment Set करना और Display Size के अनुसार Responsive बनाने का कार्य भी CSS Image Property द्वारा किया जा सकता हैं.
विभिन्न प्रकार की Image Properties
CSS द्वारा Image Display को Control करने के लिए अलग-अलग Image Properties Provide कराती हैं. जिनके नाम और कार्यों की जानकारी नीचे दी जा रही हैं.
border Property
Border Property का इस्तेमाल Image के लिए Border Declare करने के लिए किया जाता हैं. आप Border की चौडाई, उसका प्रकार, Color आदि Declare कर सकते हैं. नीचे Border Syntax दिया जा रहा हैं.
Border Syntax
Border Syntax में तीन Values होती हैं.
- width – Border Width का मतलब है Border की मोटाई कितनी हैं. इसे आप Pixels में Declare कर सकते हैं.
- type – Border की मोटाई के बाद आप Border का प्रकार Declare करते हैं. आप dotted, dashed, double और solid प्रकार की Border Declare कर सकते हैं.
- color – Border Color Property द्वारा Border का Color Declare किया जाता हैं. जिसे आप Color Name, Hex Value आदि Units में Declare कर सकते हैं. Color के बारे में ज्यादा जानकारी के लिए आप CSS Color Property को पढ सकते हैं.
<html>
<head>
<title>CSS Image Border</title>
</head>
<body>
<img style=”border: 3px solid red;” src=”tutorial-pandit.logo.png” >
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
Border radius Property
Border से संबंधित एक और Property होती हैं. जिसका नाम हैं Border Radius Property. इसके द्वारा Border के कोनों की गुलाई Declare की जाता हैं.
<html>
<head>
<title>CSS Image Border</title>
</head>
<body>
<img style=”border: 3px solid red;” radius=”50%” src=”tutorial-pandit.logo.png” >
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
height and width Property
Height Property द्वारा Image की ऊँचाई Declare की जाती हैं. Height को आप Pixels में और प्रतिशत % में Declare कर सकते हैं.
इसी तरह Width Property द्वारा Image की चौडाई Declare की जाती हैं. इसे भी Pixels और Percentage में Declare कर सकते हैं.
Pixels में Declare Height और Width Absolute रहती हैं. और Percentage में Declare Height और Width Responsive रहती हैं.
<html>
<head>
<title>CSS Image Border</title>
</head>
<body>
<img style=”height: 75px; widht: 100px;” src=”tutorial-pandit.logo.png” >
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
opacity Property
Image Opacity Property द्वारा आप Image की Clarity Set करते हैं. और Image को Transparent भी बनाते हैं. इसकी Value 0.1 से लेकर 1 तक हो सकती हैं.
<html>
<head>
<title>CSS Image Border</title>
</head>
<body>
<img style=”opacity: .3″ src=”tree.png” >
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
आपने क्या सीखा?
इस Tutorial में हमने आपको CSS Image Property के बारे में जानकारी दी हैं. आप Image की Height & Width Set करना भी सीख गए हैं. हमे उम्मीद हैं कि यह Tutorial आपके लिए उपयोगी साबित होगा.
#BeDigital
VINAY KUMAR HARBANSH says
It’s realy great and usefull content for learner
Thanks dear team
Ankush Dubey says
Nice content and matter. Please give us a PDF of all tags and information about CSS
TP Staff says
अंकुश जी, हम पीडीएफ उपलब्ध नही करवा रहे है. फिलहाल तो आपको ऑनलाइन ही काम चलाना पड़ेगा.