हेल्लो दोस्तों ! आपको CSS के बारे में आपको पीछे बताया जा चूका है आज इस article में IMAGE in CSS in Hindi के बारे में बताया जा रहा है तो चलिए शुरू करते है
Contents
Introduction to CSS Image Properties
CSS के द्वारा आपको कुछ property provide(IMAGE in CSS in Hindi) करता है जिसकी मदद से आप Image को optimize कर सकते है इस property के द्वारा आप image की height,width,border और opacity आदि को define कर सकते है
CSS की इस property के through आप image को height में border में width में opacity और radius आदि में कस्टमाइज कर सकते है
- image height
- image width
- image border
- image opacity
- image radius
अब हम इसके बारे में details से निचे दिया गया है
Image height property
height property के द्वारा आप image की height define करते है image की height आप pixel(px) में भी define कर सकते है और % percentage भी define कर सकते है तो image container के according उतनी % height ले लेती है<html>
<head>
<title>image height property</title>
<style>
img{
height:150px;
}
</style>
<body>
<h2>image height propertiy</h2>
<img src=”url-image.png या jpg”>
</body>
</html>Image Width Property
width property के द्वारा image की width define किया जाता है width को आप pixel या % में दे सकते है % देने पर image container की उतनी % width में show होती है
इस property के द्वारा आप image की width को छोटा या बड़ा कर सकते है
<html>
<head>
<title>image width property</title>
<style>
img{
height:150px;
width:200px;
}
</style>
</head>
<body>
<h2>image width property</h2>
<img src=”image-url.png या jpg”>
</body>
</html>Image Border Property
border image के द्वारा आप किसी भी image की border की चौड़ाई जैसे dotted border , dashed border ,double border , solid border आदि ये सभी हम image की border पर लगाया जा सकता है साथ ही आप उसका color भी define कर सकते है इन attribute को define करके आप किसी भी image को अपनी webpage के लिए ऑप्टिमाइज़(optimize) कर सकते है
border का syntax निचे दिया गया है
border:width |type | color;आप border की चौड़ाई आप px में भी दे सकते है
जैसे border:5px;
border की border की चौड़ाई के बाद border का type define किया जाता है CSS में border के 4 basic type होते है
- dotted border-border को doted की form में represent होती है
- dashed border-border को dashes की form में represent होती है
- double border-border को double lines के रूप में show होती है
- solid border-border एक solid लाइन के रूप में show होती है
syntax
border:5px solid;
इस तरह से border को आप define कर सकते है
border का type define करने के बाद आप उसका color भी define कर सकते है color की value में color का नाम या hex code का भी प्रयोग कर सकते है
<html>
<head>
<title>image border property</title>
<style>
img{
border:5px dotted;
}
</style>
</head>
<body>
<h2>image border property here </h2>
<img src=”image-url.png या jpg”>
</body>
</html>Image Opacity Property
opacity property के द्वारा आप image की sharpness और clarity define किया जाता है इस property के value 0.1 से लेकर 1 तक होती है जैसे जैसे opacity की value कम करते है वैसे वैसे image की clarity कम होती है और 0.1 पर image धुंधला और 1 की value पर image सबसे clear दिखाई देता है 0.1 value सबसे low और 1 पर value सबसे high होती है<html>
<head> <title>image opacity property</title><style> img{ border:5px dotted; opacity:0.2; } </style> </head> <body> <h2>image border property here </h2> <img src=”image-url.png या jpg”> </body> </html>
Image Radius property
Image में border से related CSS आपको border radius property भी provide करता है जिस की सहायता से आप चाहे तो image को राउंड बना सकते है यहाँ तक की आप इस property की value आप % में define करते है यदि आप image को पूरी तरह राउंड बनाना चाहते है तो आपको value 50% value देनी होती है
जैसे border-radius:50%;
<html>
<head>
<title>image radius property</title>
<style>
img{
border:5px dotted;
border-radius:50%;
}
</style>
</head>
<body>
<h2>image border property here </h2>
<img src=”image-url.png या jpg”>
</body>
</html>
reference-https://www.javatpoint.com/css-images
निवेदन :-अगर आपको यह आर्टिकल उपयोगी लगा हो तो इस आप अपने क्लासमेट ,दोस्तों के साथ अवश्य share कीजिये और आपके जो भी इस पोस्ट्स से related(सम्बन्धित) questions है तो आप उन्हें निचे कमेंट कर सकते है हम उसके answer अवश्य करेंगे Thank