Ejupi contenido principal-pe Eike docs jeguatahápe
Check
in English

Ta’ãngamýi

Kuatiahaipyre ha techapyrã ojeporavo hag̃ua taꞌãngamýi reko ombohováivape (upéicha hag̃ua arakaꞌeve ndojepysói ituvakuéragui) ha oñembojoapy hesekuéra estilo ligero —opavave mboꞌepy rupive.

Ta’angakuéra ombohováiva

Taꞌãngamýi oĩva Bootstrap-pe ojejapo ombohovái hag̃ua .img-fluid. Kóva ojeporu max-width: 100%;ha height: auto;taꞌãngamýime ikatu hag̃uáicha oescala tuvakuéra ipekue ndive.

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

Ta’ãnga’i michĩva

Ore utilidad border-radius rehegua ári , ikatu reipuru .img-thumbnaileme’ẽ hag̃ua peteĩ ta’ãngamýipe peteĩ 1px rembe’y jehechauka jerere.

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200
html rehegua
<img src="..." class="img-thumbnail" alt="...">

Oñemohenda hag̃ua ta’ãngamýi

Emohenda taꞌãngamýi umi mboꞌepy flotador pytyvõhára térã mboꞌepy jehaipyre ñemohenda rehegua ndive . block-nivel taꞌãngamýi ikatu oñecentra ojeporúvo clase utilidad .mx-automargen rehegua .

Placeholder 200x200 Placeholder 200x200
html rehegua
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">
Placeholder 200x200
html rehegua
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder 200x200
html rehegua
<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

Ha'ãnga

Oipurúramo <picture>elemento emombeꞌu hag̃ua heta <source>elemento peteĩ específico -pe g̃uarã <img>, eñangareko emoĩ hag̃ua umi .img-*mboꞌepy pe etiqueta-pe <img>ha ndahaꞌei <picture>etiqueta-pe.

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

Sass rehegua

Variables rehegua

Umi variable ojeguereko taꞌãngamýi michĩvape g̃uarã.

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