in English

امیجز

جوابی رویے میں تصاویر کو منتخب کرنے کے لیے دستاویزات اور مثالیں (تاکہ وہ کبھی بھی اپنے والدین کے عناصر سے بڑے نہ ہوں) اور ان میں ہلکے پھلکے انداز شامل کریں—سب کچھ کلاسز کے ذریعے۔

قبول تصاویر

بوٹسٹریپ میں امیجز کو اس کے ساتھ جوابدہ بنایا جاتا .img-fluidہے۔ max-width: 100%;اور height: auto;تصویر پر لاگو ہوتے ہیں تاکہ یہ بنیادی عنصر کے ساتھ پیمانے پر ہو۔

Placeholder Responsive image
<img src="..." class="img-fluid" alt="...">
ایس وی جی امیجز اور انٹرنیٹ ایکسپلورر

انٹرنیٹ ایکسپلورر 10 اور 11 میں، ایس وی جی امیجز .img-fluidغیر متناسب سائز کی ہیں۔ اسے ٹھیک کرنے کے لیے، شامل کریں width: 100%;یا .w-100جہاں ضروری ہو۔ یہ فکس دوسرے تصویری فارمیٹس کو غلط طریقے سے سائز دیتا ہے، لہذا بوٹسٹریپ اسے خود بخود لاگو نہیں کرتا ہے۔

تصویری تھمب نیلز

ہماری سرحدی رداس کی افادیت.img-thumbnail کے علاوہ، آپ کسی تصویر کو گول 1px بارڈر کی شکل دینے کے لیے استعمال کر سکتے ہیں ۔

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200
<img src="..." class="img-thumbnail" alt="...">

تصاویر کو سیدھ میں لانا

ہیلپر فلوٹ کلاسز یا ٹیکسٹ الائنمنٹ کلاسز کے ساتھ امیجز کو سیدھ میں کریں ۔ blockسطح کی تصاویر کو مارجن یوٹیلیٹی کلاس کا استعمال کرتے ہوئے سینٹر کیا جا سکتا .mx-autoہے ۔

Placeholder 200x200 Placeholder 200x200
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
Placeholder 200x200
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder 200x200
<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

تصویر

اگر آپ <picture>عنصر کو کسی مخصوص کے لیے متعدد <source>عناصر کی وضاحت کرنے کے لیے استعمال کر رہے ہیں <img>، تو یقینی بنائیں کہ .img-*کلاسز کو ٹیگ میں شامل کریں <img>نہ کہ <picture>ٹیگ میں۔

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>