Source

படங்கள்

பதிலளிக்கும் நடத்தையில் படங்களைத் தேர்ந்தெடுப்பதற்கான ஆவணங்கள் மற்றும் எடுத்துக்காட்டுகள் (எனவே அவை அவற்றின் பெற்றோர் கூறுகளை விட பெரிதாக இருக்காது) மற்றும் வகுப்புகள் மூலம் அவற்றிற்கு இலகுரக பாணிகளைச் சேர்க்கவும்.

பதிலளிக்கக்கூடிய படங்கள்

பூட்ஸ்டார்ப்பில் உள்ள படங்கள் உடன் பதிலளிக்கக்கூடியவை .img-fluid. max-width: 100%;மேலும் height: auto;அவை படத்தின் மூலப்பொருளுடன் செதில்களாகப் பயன்படுத்தப்படுகின்றன.

<img src="..." class="img-fluid" alt="Responsive image">

SVG படங்கள் மற்றும் IE 10

இன்டர்நெட் எக்ஸ்புளோரர் 10 இல், எஸ்விஜி படங்கள் .img-fluidவிகிதாச்சார அளவில் உள்ளன. இதை சரிசெய்ய, width: 100% \9;தேவையான இடங்களில் சேர்க்கவும். இந்த பிழைத்திருத்தமானது மற்ற பட வடிவங்களை தவறாக அளவிடுகிறது, எனவே பூட்ஸ்டார்ப் தானாக பொருந்தாது.

பட சிறுபடங்கள்

எங்கள் பார்டர்-ரேடியஸ் பயன்பாடுகளுக்கு கூடுதலாக , நீங்கள் .img-thumbnailஒரு படத்தை வட்டமான 1px பார்டர் தோற்றத்தை கொடுக்க பயன்படுத்தலாம்.

<img src="..." alt="..." class="img-thumbnail">

படங்களை சீரமைத்தல்

உதவி ஃப்ளோட் வகுப்புகள் அல்லது உரை சீரமைப்பு வகுப்புகளுடன் படங்களை சீரமைக்கவும் . -நிலைப் படங்களை விளிம்பு பயன்பாட்டு வகுப்பைப்block பயன்படுத்தி மையப்படுத்தலாம்.mx-auto .

<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">

<img src="..." class="rounded mx-auto d-block" alt="...">

<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>