Images, Media Objects

📖 Theory

એ poster જેણે સ્તંભ તોડી નાખ્યો

Unit 1 માં તમે FestConnect ના poster ને width="600" ગોઠવ્યું હતું. Phone પરના Bootstrap ના સ્તંભની અંદર 600 pixels એ પડદા કરતાં પહોળા છે, એટલે ચિત્ર બહાર નીકળી જાય છે અને આડી scrollbar દેખાય છે.

તમારે દરેક પડદા માટે હાથે pixel ની પહોળાઈ ગોઠવવી નથી. Bootstrap image ના એવા classes આપે છે જે ચિત્રોને આપોઆપ એમના પાત્રમાં બેસાડે છે, વત્તા નાના ચિત્રને એના લખાણની બાજુમાં બેસાડવાની સુઘડ રીત, જે ગોઠવણ દરેક event નું card વાપરે છે.

📖 Theory

ચોકઠી પ્રમાણે માપ બદલતો ફોટો

છાપેલો ફોટો નિશ્ચિત માપનો હોય છે: નાની ચોકઠી માટે બહુ મોટો હોય તો બેસશે નહીં. img-fluid એ જાદુઈ ફોટા જેવું છે જે તમે એને જે ચોકઠીમાં નાખો એમાં સંકોચાઈ જાય છે, ક્યારેય કિનારીની બહાર ઢોળાયા વગર, અને પોતાનું પ્રમાણ જાળવીને. તમે ચોકઠી માપવાનું બંધ કરો છો; તમે ફક્ત 'બેસી જા' કહો છો, અને ચિત્ર જે સ્તંભમાં પડે એને પાળે છે.

📖 Theory

Image ની ઉપયોગિતાઓ

• `img-fluid`: ચિત્ર પોતાના પાત્રમાં બેસવા સંકોચાય છે (max-width 100%, height auto). આ જ responsive image નો class છે.
• `img-thumbnail`: આછી કિનારીવાળી, ગોળ ખૂણાવાળી ચોકઠી.
• `rounded`, `rounded-circle`, `rounded-pill`: ખૂણા ઘડે છે (avatars માટે circle સરસ છે).
• વચ્ચે લાવવું: mx-auto d-block.

Media object એ લખાણના ટુકડાની બાજુમાં નાનું ચિત્ર છે. Bootstrap 5 માં તમે એને flex ની ઉપયોગિતાઓ (d-flex) કે card થી બનાવો છો, કારણ કે જૂનો .media class કાઢી નખાયો છે.

⌨️ Practical

Responsive poster અને event નું media object

<!-- responsive: fits any column, no overflow -->
<img src="images/fest-poster.jpg" class="img-fluid" alt="TechFest 2026 poster">

<!-- media object: thumbnail left, text right (flex in BS5) -->
<div class="d-flex">
  <img src="images/robotics.jpg" class="rounded me-3"
       width="64" height="64" alt="Robotics event">
  <div>
    <h5>Robotics Challenge</h5>
    <p>Build and battle line-follower bots. 12 March, 10 am.</p>
  </div>
</div>

This example runs in Gri-Learn on the web, where you can edit it and see the output.

💭 Think first

બહાર નીકળવાનું સુધારો

તમારું <img width="600"> વાળું poster phone પર એના સ્તંભની બહાર નીકળી જાય છે. કયો એક Bootstrap નો class એને સુધારે છે, અને એ class અંદરખાને ખરેખર કયા બે CSS ના નિયમો લગાડે છે?

🧩 Quiz

તમને FestConnect ના આયોજકોની ટીમ માટે ગોળ profile ના ફોટા જોઈએ છે. કયો class ચોરસ ચિત્રને વર્તુળમાં ઘડે છે?

1. rounded-circle
2. img-fluid
3. img-thumbnail
4. btn-circle

⚠️ Watch out

Image ની ઉપયોગિતાના ફાંદા

1. Mobile પર બહાર નીકળતાં ચિત્રો: તમે img-fluid ભૂલી ગયા છો. Bootstrap ના image નો આ સૌથી સામાન્ય ઉકેલ છે.

2. જૂના `.media` class તરફ હાથ લંબાવવો: એ Bootstrap 5 માં કાઢી નખાયો છે. ચિત્ર-બાજુમાં-લખાણ ની ગોઠવણ માટે d-flex કે card વાપરો.

3. src અને alt છોડી દેવાં: Bootstrap ના classes ફક્ત ચિત્રને શણગારે છે; Unit 1 ની સાદા HTML ની આવશ્યકતાઓ (ખરેખરું src અને અર્થપૂર્ણ alt) હજી જરૂરી છે.

📖 Theory

આ cards બની જાય છે

અહીંનું media object એ Bootstrap ના card નું બીજ છે, એટલે કે ચિત્ર, મથાળું, લખાણ અને બટન વાળી કિનારીવાળી પેટી. FestConnect ની events ની યાદી એ આ cards ની grid છે (Unit 2 નો grid નો પાઠ). અને જ્યારે એક પડદામાં સમાય એથી વધુ events હોય, ત્યારે હવે પછીનો પાઠ, pagination, એમને ક્રમાંકિત પાનાંમાં વહેંચે છે.

✅ Summary

Key takeaways

• img-fluid ચિત્રને એના પાત્ર પ્રમાણે માપ બદલાવે છે (max-width 100%, height auto): મુખ્ય responsive image નો class.
• img-thumbnail કિનારીવાળી ચોકઠી ઉમેરે છે; rounded / rounded-circle / rounded-pill ખૂણા ઘડે છે.
• Media object (લખાણની બાજુમાં ચિત્ર) Bootstrap 5 માં d-flex કે card થી બને છે (જૂનો .media class કાઢી નખાયો છે).
• Bootstrap ચિત્રને શણગારે છે પણ Unit 1 નાં src અને alt હજી જરૂરી છે.
• Mobile પર બહાર નીકળતાં ચિત્રો લગભગ હંમેશા ખૂટતા img-fluid નો અર્થ કરે છે.
• Memory hook: ચોકઠી પ્રમાણે માપ બદલતો ફોટો.