Source

ምስሎች

ምስሎችን ወደ ምላሽ ሰጪ ባህሪ የመምረጥ ሰነዶች እና ምሳሌዎች (ስለዚህ ከወላጆቻቸው ንጥረ ነገሮች አይበልጡም) እና ለእነሱ ቀላል ክብደት ያላቸውን ቅጦች - ሁሉም በክፍል።

ምላሽ ሰጪ ምስሎች

በ Bootstrap ውስጥ ያሉ ምስሎች ምላሽ የሚሰጡ ናቸው .img-fluid. max-width: 100%;እና height: auto;ከወላጅ አካል ጋር እንዲመዘን በምስሉ ላይ ይተገበራሉ።

Placeholder Responsive image 
<img src="..." class="img-fluid" alt="Responsive image">
SVG ምስሎች እና IE 10

በኢንተርኔት ኤክስፕሎረር 10 ውስጥ የኤስቪጂ ምስሎች .img-fluidያላቸው ተመጣጣኝ ያልሆነ መጠን አላቸው። ይህንን ለማስተካከል, width: 100% \9;አስፈላጊ ከሆነ ያክሉት. ይህ አስተካክል ሌሎች የምስል ቅርጸቶችን አላግባብ ያስተካክላል፣ ስለዚህ Bootstrap በራስ ሰር አይተገበርም።

የምስል ድንክዬዎች

ከድንበር-ራዲየስ መገልገያዎች በተጨማሪ .img-thumbnailምስሉን ክብ ባለ 1 ፒክስል የጠረፍ ገጽታ ለመስጠት መጠቀም ይችላሉ ።

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="..." alt="..." class="img-thumbnail">

ምስሎችን ማመጣጠን

ምስሎችን ከረዳት ተንሳፋፊ ክፍሎች ወይም የጽሑፍ አሰላለፍ ክፍሎች ጋር ያስተካክሉ ። 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>