Skill Topic · Cinematic

🎯 CSS Object-position — Image ke Andar Kahan Focus Karo

object-position = jab object-fit se image crop hoti hai, tab image ka kaunsa part dikhna chahiye —…

Overview

🎯 CSS Object-position — Image ke Andar Kahan Focus Karo — Quick Facts

📌

CCTV Part: CSS Concept

🎯

📹 Camera lens (full view): Original image (bada)

⚡

📺 Monitor screen (choti): Container (fixed size)

🔑

🎛️ Pan joystick direction: object-position keywords

Topic 1

🎯 Real-World Analogy: CCTV Camera Pan System 📹🎛️

📚 Socho tumhare paas ek CCTV Security System hai — camera ka lens poora area cover karta…

Topic 2

📌 Section 1: Syntax — Camera Control Panel 🎛️

💡 📹 CCTV Analogy: Camera ka control panel — object-position: x y; = horizontal aur vertical…

Topic 3

📌 Section 2: Keyword Values — Preset Camera Angles 🎛️

🎯 📹 CCTV Analogy: Camera me preset positions hoti hain — "entrance dekho", "lobby dekho",…

Topic 4

📌 Section 3: Percentage Values — Fine Camera Adjustment 📐

⭐ 📹 CCTV Analogy: Preset positions ke ilawa camera ko fine-tune bhi kar sakte ho — "thoda…

Topic 5

📌 Section 4: Pixel Values — Exact Camera Angle 📏

🔑 📹 CCTV Analogy: Percentage se bhi zyada precise control chahiye? Exact pixels me camera…

Topic 6

📌 Section 5: Practical Use Cases — Real Camera Setups 🔍

✨ 5.1 Portrait Photo — Face Focus ⭐ `css / === Portrait — Face usually image ke top 20-30%…

Topic 7

📌 Section 6: object-position with contain 📦

🌟 📹 CCTV Analogy: Agar camera zoom out kare (contain = poori image dikhe), to image…

Topic 8

📌 Section 7: Advanced Patterns 🚀

🚀 7.1 Responsive Hero with Smart Focus `css / === Hero image jo mobile/desktop pe different…

Topic 9

📌 Section 8: Complete Working Example 🏗️

📚 `html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta…

Topic 10

⚠️ Common Mistakes (Galtiyan Jo Sab Karte Hain)

💡 | # | ❌ Galti | ✅ Sahi Tareeqa | 🤔 Kyun? | |---|---|---|---| | 1 | object-position set…

Topic 11

🧪 Practice Exercises

🎯 🟢 Beginner: 9-Position Grid Task: Ek hi image ko 9 containers me dikhao (3x3 grid). Har…

Topic 12

📋 Quick Reference Summary Table

⭐ | Concept | Property/Value | Notes | |---|---|---| | Syntax | object-position: x y; | x =…

Topic 13

🔗 Navigation

🔑 ⬅️ Previous: CSS Object-fit | ➡️ Next: CSS Masking

Diagram

Visual Flow

📊 Diagram visualization — details in narration

Diagram

Visual Flow

📊 Diagram visualization — details in narration

Quick Quiz

Quiz — Question 1

🎯 CSS Object-position — Image ke Andar Kahan Focus Karo ka sabse sahi definition kya hai?

Quick Quiz

Quiz — Question 2

🎯 CSS Object-position — Image ke Andar Kahan Focus Karo ka '📹 Camera lens (full view)' kya hai?

Complete! 🎉

🎯 CSS Object-position — Image ke Andar Kahan Focus Karo Complete!

Aliens School · HIEN · Cinematic Knowledge

✅