← Back to CSS Course | Chapter 9: Modern CSS Features | Lesson 6 of 25

CSS Aspect Ratio

एक picture frame factory की कल्पना करें जिसे पहले हर order आने पर हाथ से width से height measure करने के लिए एक worker चाहिए होता था, frames को stretched दिखने से बचाने के लिए padding tricks और extra wrapper elements इस्तेमाल करते हुए। aspect-ratio property ने उस हाथ के काम को एक single instruction से replace कर दिया: इस box की width और height को एक fixed ratio में रखो, जैसे 16 by 9, चाहे यह किसी भी size का हो जाए। अब video players, product photos, और placeholder boxes पुराने padding-bottom percentage hack के बिना screen resize होने पर automatically अपना shape बनाए रख सकते हैं।

In this page:

  1. aspect-ratio का Basic Syntax
  2. 16 by 9 Video Containers
  3. किसी Gallery में Square Images
  4. अपना Shape बनाए रखने वाले Responsive Boxes
  5. aspect-ratio मौजूद होने से पहले Fallback
Syntax
css 
selector {
  aspect-ratio: width / height;
}

aspect-ratio का Basic Syntax

aspect-ratio property एक forward slash से अलग की गई width और height accept करती है, और browser जो भी एक set है उससे missing dimension compute कर लेता है। इसका मतलब है आपको सिर्फ कभी एक width या एक height set करने की ज़रूरत है, दोनों नहीं, और browser बाकी संभाल लेता है।

Note:
  • आप एक perfect square के लिए shorthand के रूप में aspect-ratio: 1 लिख सकते हैं, जो aspect-ratio: 1 / 1 के बराबर है।
  • Accepted values:
  • ratio — width / height, जैसे 16 / 9
  • number — single number जैसे square के लिए 1
  • auto — element का natural ratio इस्तेमाल करता है (default)
  • auto ratio — available होने पर natural ratio, वरना दी गई ratio
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: अगर किसी element की कोई defined width नहीं है और उसका content naturally एक establish नहीं करता तो aspect-ratio को नज़रअंदाज़ कर दिया जाता है, हमेशा पहले box को एक width दें।

उदाहरण: Basic Syntax of aspect-ratio

css 
<style>
.box {
  width: 300px;
  aspect-ratio: 16 / 9;
  background: steelblue;
  color: white;
}
</style>
<div class="box">Height computed automatically from the width</div>

16 by 9 Video Containers

16 by 9 standard widescreen video ratio है, और aspect-ratio बिना wrapper divs या padding tricks के responsive video players embed करना simple बना देता है। यह property मौजूद होने से पहले, developers इसी responsive effect को achieve करने के लिए padding-top percentage hack पर निर्भर थे।

Note:
  • किसी iframe पर aspect-ratio: 16 / 9 के साथ width: 100% set करें ताकि video अपने parent की width भर दे और height automatically derive करे।
  • Accepted values:
  • aspect-ratio: 16 / 9 — widescreen video
  • aspect-ratio: 4 / 3 — classic monitor
  • width: 100% — height automatically follow करती है
  • height: auto — ratio लागू होने के लिए चाहिए
Warning: कुछ embed providers अपने iframe पर एक explicit height attribute set करते हैं, जो आपकी aspect-ratio को override कर सकता है जब तक आप CSS में भी height reset न करें।

उदाहरण: 16 by 9 Video Containers

css 
<style>
iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
}
</style>
<iframe src="about:blank"></iframe>

किसी Gallery में Square Images

1 by 1 ratio thumbnail grids को visually consistent रखती है यहाँ तक कि जब source photos अलग-अलग original sizes में आते हों। यह उस layout jump से बचाता है जो fixed-size grid cells में अलग-अलग dimensions वाली images load होने पर होता है।

Note:
  • aspect-ratio: 1 को inner img पर object-fit: cover के साथ combine करें ताकि हर thumbnail square और uncropped-looking दोनों हो।
  • Accepted values:
  • aspect-ratio: 1 / 1 — square
  • aspect-ratio: 1 — 1 / 1 जैसा ही
  • object-fit: cover — बिना distortion के square भरता है
  • width: 100% — height follow करती है
Warning: object-fit: cover के बिना, एक square aspect-ratio box के अंदर एक image बस उसे भरने के लिए stretch हो जाएगी अगर वह उसी natural ratio को share न करे।

उदाहरण: Square Images in a Gallery

css 
<style>
img {
  aspect-ratio: 1;
  object-fit: cover;
  width: 150px;
}
</style>
<img src="https://placehold.co/300x200" alt="Cropped to a perfect square">

अपना Shape बनाए रखने वाले Responsive Boxes

aspect-ratio media तक सीमित नहीं है, कोई भी box जैसे card, banner, या map placeholder अलग-अलग screens पर अपनी width बदलने पर एक consistent shape बनाए रख सकता है। यह इसे एक general-purpose layout tool बनाता है, सिर्फ image-specific property नहीं।

Note:
  • skeleton loading placeholders पर aspect-ratio इस्तेमाल करें ताकि असली content के replace होने पर page layout jump न करे।
  • Accepted values:
  • aspect-ratio: <ratio> — height width से derive होती है
  • max-width: <length> — box को cap करता है
  • width: <percentage> — flexible width
  • min-height — अगर content taller है तो ratio को override करता है
Warning: अगर box का content ratio से ज़्यादा taller है, तो content overflow हो सकता है जब तक आप overflow: hidden या auto भी set न करें।

उदाहरण: Responsive Boxes That Hold Their Shape

css 
<style>
.card {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: steelblue;
  color: white;
}
</style>
<div class="card">Holds its shape as width changes</div>

aspect-ratio मौजूद होने से पहले Fallback

पुराने codebases padding-bottom percentage trick इस्तेमाल करते थे, किसी खाली element पर width के percentage के रूप में padding-bottom लागू करते हुए एक ratio force करने के लिए, क्योंकि percentage padding हमेशा width से calculate होती है।

Note:
  • बहुत पुराने browsers को support करते समय, एक modern aspect-ratio declaration के साथ padding-bottom hack को fallback के तौर पर रखें।
  • Accepted values:
  • aspect-ratio: 16 / 9 — modern approach
  • padding-top: 56.25% — 16 / 9 के लिए पुराना padding hack
  • position: relative — hack के लिए wrapper पर
  • position: absolute — hack में inner content के लिए
Warning: padding-bottom hack को inner content को absolutely position करना ज़रूरी है, जो extra markup जोड़ता है जिसे aspect-ratio अनावश्यक बना देता है।

उदाहरण: Falling Back Before aspect-ratio Existed

css 
<style>
.ratio-box {
  position: relative;
  padding-bottom: 56.25%;
  background: #ddd;
}
.ratio-box > * {
  position: absolute;
  inset: 0;
  background: steelblue;
  color: white;
}
</style>
<div class="ratio-box">
  <div>The old padding-bottom percentage trick</div>
</div>
Live Example
Related Topics

CSS Writing Modes · CSS Object Fit · CSS Logical Sizing · CSS object-position

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. aspect-ratio और एक explicit height दोनों set करना, एक explicit height हमेशा ratio को override करती है और property का कोई visible effect नहीं होता।
  2. ratio को उल्टा लिखना, aspect-ratio: 9 / 16 एक wide landscape box के बजाय एक tall portrait box produce करता है।
  3. यह भूल जाना कि aspect-ratio सिर्फ shape reserve करता है, यह media को automatically crop या fit नहीं करता, आपको अंदर की images के लिए फिर भी object-fit चाहिए।
चैप्टर सारांश
  • aspect-ratio: width / height किसी box के proportions को lock कर देता है ताकि height उसकी width से automatically derive हो।
  • यह responsive video और image containers के लिए पुराने padding-bottom percentage hack को replace करता है।
  • box shape और image proportions दोनों को सही रखने के लिए inner media पर aspect-ratio को object-fit: cover के साथ combine करें।
ब्राउज़र सपोर्ट

aspect-ratio 2021 से हर modern browser द्वारा supported है, पुराने browsers इसे चुपचाप नज़रअंदाज़ करके content की natural height पर fall back हो जाते हैं।

🔒

Chapter Quiz — Complete all 25 topics to unlock

0/25 topics done

Complete these topics first:

← Previous Lesson CSS Writing Modes Next Lesson → CSS Object Fit

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.