Source

ምስሎች

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

ምላሽ ሰጪ ምስሎች

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

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

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

የምስል ድንክዬዎች

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

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

ምስሎችን ማመጣጠን

ምስሎችን ከረዳት ተንሳፋፊ ክፍሎች ወይም የጽሑፍ አሰላለፍ ክፍሎች ጋር አሰልፍ ። block-ደረጃ ምስሎች የኅዳግ መገልገያ ክፍልን በመጠቀም መሃል.mx-auto ላይ ሊገኙ ይችላሉ ።

200x200 200x200
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
200x200
<img src="..." class="rounded mx-auto d-block" alt="...">
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>