in English

Íomhánna

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

Ar an leathanach seo

Íomhánna sofhreagracha

Déantar íomhánna i Bootstrap sofhreagrach le .img-fluid. Baineann sé seo max-width: 100%;agus height: auto;leis an íomhá ionas go scálaí sé le leithead an tuismitheora.

html

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

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

html

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

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

html

<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">

html

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

html

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

Sass

Athróga

Tá athróga ar fáil le haghaidh mionsamhlacha íomhá.

$thumbnail-padding:                 .25rem;
$thumbnail-bg:                      $body-bg;
$thumbnail-border-width:            $border-width;
$thumbnail-border-color:            var(--#{$prefix}border-color);
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;