CSS Image Styling

अपने आप में एक <img> tag बस pixels का एक raw rectangle है — CSS ही वह चीज़ है जो इसे rounded corners, एक border, एक drop shadow, एक filter effect, और अपने container के साथ gracefully resize होने की क्षमता देती है।

In this page:

Image Corners को Round करना
Images पर Borders और Shadows
Images पर Filter Effects
max-width के साथ Responsive Images
Cropped Images के लिए object-fit

Syntax

css

img {
  border-radius: length;
  max-width: 100%;
  height: auto;
}

Image Corners को Round करना

किसी <img> पर border-radius लागू करना बिल्कुल किसी दूसरे box की तरह काम करता है, image के corners को round करते हुए, या 50% पर, किसी square image को एक perfect circle में बदलते हुए। क्योंकि image खुद rounded box में clip हो जाती है, इस simple case के लिए किसी extra masking property की ज़रूरत नहीं है।

Note:

Accepted values:
border-radius: <length> — px, em, rem में rounded corners
border-radius: <percentage> — box size के relative
border-radius: 50% — square पर circle, वरना ellipse
border-radius: A B C D — top-left, top-right, bottom-right, bottom-left
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Rounding Image Corners

css

<style>
img {
  border-radius: 50%;
}
</style>
<img src="https://placehold.co/100x100" alt="Circular image">

Images पर Borders और Shadows

एक regular border property किसी image के चारों ओर एक frame draw करती है बिल्कुल वैसे जैसे वह किसी div के चारों ओर करती, और box-shadow इसके पीछे एक drop shadow जोड़ती है — दोनों को combine करना किसी photo को page के ऊपर बैठे एक printed card जैसा दिखाने का एक common तरीका है।

Note:

Accepted values:
border: <width> <style> <color> — solid, dashed, dotted, वगैरह
box-shadow: <x> <y> <blur> <spread> <color> — box के चारों ओर drop shadow
box-shadow: inset ... — box के अंदर shadow; default none है
outline: <width> <style> <color> — layout को असर नहीं करता
border-radius — border और shadow को round करता है
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Borders and Shadows on Images

css

<style>
img {
  border: 4px solid white;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
</style>
<img src="https://placehold.co/150x100" alt="Framed like a printed card">

Images पर Filter Effects

filter property किसी image editor की ज़रूरत के बिना grayscale(), blur(), brightness(), और sepia() जैसे effects सीधे किसी image के pixels पर लागू करती है, और इन filters को combine किया जा सकता है और यहाँ तक कि hover पर smoothly transition भी किया जा सकता है।

Note:

Accepted values:
filter: none — कोई effect नहीं (default)
filter: grayscale(<n>) — 0 से 1
filter: sepia(<n>) — 0 से 1
filter: blur(<length>) — blur radius
filter: brightness(<n>) — 1 unchanged है
filter: hue-rotate(<angle>) | drop-shadow() — hues shift, shadow
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Filter Effects on Images

css

<style>
img {
  filter: grayscale(100%);
  transition: filter 0.3s;
}
img:hover {
  filter: none;
}
</style>
<img src="https://placehold.co/150x100" alt="Grayscale, hover to see color">

max-width के साथ Responsive Images

किसी image पर max-width: 100% (height: auto के साथ) set करना उसे छोटे screens पर अपने container में fit होने के लिए shrink होने देता है जबकि यह कभी अपने natural size से wider stretch नहीं होती, जो web पर सबसे common responsive-image rule है।

Note:

Accepted values:
max-width: 100% — parent की width से कभी ज़्यादा नहीं
max-width: <length> — px या rem में cap
max-width: none — default, कोई cap नहीं
height: auto — aspect ratio बनाए रखता है
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Responsive Images with max-width

css

<style>
img {
  max-width: 100%;
  height: auto;
}
</style>
<img src="https://placehold.co/1200x600" alt="Shrinks but never grows past natural size">

Cropped Images के लिए object-fit

जब कोई image उसके container के aspect ratio से match नहीं करती, तो object-fit: cover इसे distort किए बिना box भरने के लिए crop कर देता है, जबकि object-fit: contain इसे पूरी तरह box के अंदर fit होने के लिए shrink कर देता है, ज़रूरत पड़ने पर खाली जगह छोड़ते हुए।

Note:

Accepted values:
fill — default, box में stretch होता है
contain — अंदर fit होता है, ratio रखता है, letterbox हो सकता है
cover — box भरता है, ratio रखता है, crop हो सकता है
none — natural size, कोई resizing नहीं
scale-down — none या contain में से छोटा
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: object-fit for Cropped Images

css

<style>
.cover {
  width: 150px;
  height: 100px;
  object-fit: cover;
}
.contain {
  width: 150px;
  height: 100px;
  object-fit: contain;
}
</style>
<img class="cover" src="https://placehold.co/400x200" alt="Cropped to fill">
<img class="contain" src="https://placehold.co/400x200" alt="Shrunk to fit entirely">

Live Example

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Animations Next Lesson → CSS Image Effects

CSS Image Styling

Image Corners को Round करना

Images पर Borders और Shadows

Images पर Filter Effects

max-width के साथ Responsive Images

Cropped Images के लिए object-fit

Chapter Quiz — Complete all 22 topics to unlock

Login to run this code