Responsive Images बनाना
Responsive images छोटी screens पर overflow होने की बजाय अपने container में fit होने के लिए सिकुड़ती हैं।
In this page:
Syntax
<img src="image.jpg" class="img-fluid" alt="...">
<img src="image.jpg" class="img-thumbnail" alt="...">Responsive Images
एक image को max-width: 100% और height: auto देने के लिए .img-fluid add करें। एक bordered look के लिए .img-thumbnail, shapes के लिए .rounded और .rounded-circle, और placement के लिए alignment utilities इस्तेमाल करें।
Layout shift से बचने के लिए width और height attributes add करें और art direction के लिए picture element।
Note:
load होते वक्त space reserve करने के लिए width और height attributes set करें।
उदाहरण: Responsive images
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<div class="container">
<img src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='200'%3E%3Crect width='600' height='200' fill='%23712cf9'/%3E%3Ctext x='50%25' y='50%25' fill='white' font-size='32' text-anchor='middle' dy='.3em'%3E600 x 200 image%3C/text%3E%3C/svg%3E" class="img-fluid rounded mb-2" width="600" height="200" alt="Placeholder banner that scales down">
<p class="text-body-secondary">Resize the window: the image scales with img-fluid.</p>
</div>
</body>
</html>Live Example
Related Topics
{# 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. #}
आम गलतियां
- images पर Fixed pixel widths
- alt text missing होना
- बहुत बड़ी, unoptimised files इस्तेमाल करना
चैप्टर सारांश
- img-fluid images scale करता है
- img-thumbnail एक border add करता है
- rounded utilities images shape करते हैं
- हमेशा alt text provide करें
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: