Source

Íomhánna

Doiciméadú agus samplaí chun íomhánna a roghnú in iompar sofhreagrach (mar sin ní éiríonn siad níos mó ná na heilimintí tuismitheora) agus cuireann siad stíleanna éadroma leo - go léir trí ranganna.

Íomhánna sofhreagracha

Déantar íomhánna i Bootstrap sofhreagrach le .img-fluid. max-width: 100%;agus height: auto;cuirtear i bhfeidhm iad ar an íomhá ionas go mbeidh sé scálaí leis an máthaireilimint.

100%x250 
<img src="..." class="img-fluid" alt="Responsive image">
Íomhánna SVG agus IE 10

.img-fluidIn Internet Explorer 10, tá méideanna díréireach ar íomhánna SVG . Chun é seo a shocrú, cuir leis width: 100% \9;nuair is gá. Méadaíonn an deisiúchán seo formáidí íomhá eile go míchuí, mar sin ní chuireann Bootstrap i bhfeidhm go huathoibríoch é.

Mionsamhlacha íomhá

Chomh maith lenár bhfóntais ga teorann , is féidir leat é a úsáid .img-thumbnailchun cuma teorann chothromú 1px a thabhairt don íomhá.

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

Íomhánna a ailíniú

Ailínigh na híomhánna leis na ranganna snámhphointe cúntóir nó ranganna ailínithe téacs . blockIs féidir íomhánna leibhéal a lárú ag baint úsáide as an .mx-autorang áirgiúlachta corrlaigh .

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>

Pictiúr

Má tá an eilimint á úsáid agat <picture>chun ileilimintí a shonrú le <source>haghaidh leathanach ar leith <img>, déan cinnte na .img-*ranganna a chur leis an gclib <img>agus ní leis an <picture>gclib.

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