ꯏꯃꯦꯖꯁꯤꯡ꯫
ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯕꯤꯍꯦꯕꯤꯌꯔꯗꯥ ꯏꯃꯦꯖꯁꯤꯡ ꯑꯣꯄꯠ ꯇꯧꯅꯕꯒꯤ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯦꯁꯟ ꯑꯃꯁꯨꯡ ꯈꯨꯗꯃꯁꯤꯡ (ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯃꯈꯣꯌꯅꯥ ꯃꯈꯣꯌꯒꯤ ꯃꯃꯥ-ꯃꯄꯥꯗꯒꯤ ꯀꯩꯗꯧꯉꯩꯗꯥ ꯍꯦꯟꯅꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯑꯣꯏꯔꯣꯏ) ꯑꯃꯁꯨꯡ ꯃꯈꯣꯌꯗꯥ ꯂꯥꯏꯠꯋꯦꯠ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯍꯥꯄꯆꯤꯜꯂꯨ- ꯄꯨꯝꯅꯃꯛ ꯑꯁꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ꯫
ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ ꯏꯃꯦꯖꯁꯤꯡ꯫
ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯇꯥ ꯂꯩꯕꯥ ꯏꯃꯦꯖꯁꯤꯡ ꯑꯁꯤ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯍꯜꯂꯤ .img-fluid
. ꯃꯁꯤ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯏ max-width: 100%;
ꯑꯃꯁꯨꯡ height: auto;
ꯏꯃꯦꯖ ꯑꯗꯨꯗꯥ ꯃꯁꯤꯅꯥ ꯃꯃꯥ-ꯃꯄꯥꯒꯤ ꯄꯥꯛ-ꯆꯥꯎꯕꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁ꯭ꯀꯦꯜ ꯇꯧꯏ꯫
<img src="..." class="img-fluid" alt="...">
ꯏꯃꯦꯖ ꯊꯝꯕꯤꯕꯥ꯫
ꯑꯩꯈꯣꯌꯒꯤ ꯕꯣꯔꯗꯔ-ꯔꯦꯗꯤꯌꯁ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ.img-thumbnail
ꯃꯊꯛꯇꯥ , ꯅꯍꯥꯛꯅꯥ ꯏꯃꯦꯖ ꯑꯃꯗꯥ ꯒꯣꯜꯗ ꯑꯣꯏꯕꯥ 1px ꯕꯣꯔꯗꯔꯒꯤ ꯃꯑꯣꯡ ꯑꯃꯥ ꯄꯤꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯒꯅꯤ꯫
<img src="..." class="img-thumbnail" alt="...">
ꯏꯃꯦꯖꯁꯤꯡ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯕꯥ꯫
ꯍꯦꯜꯄꯔ ꯐ꯭ꯂꯣꯠ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯅꯠꯔꯒꯥ ꯇꯦꯛꯁ ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯏꯃꯦꯖꯁꯤꯡ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯕꯥ . block
-ꯂꯦꯚꯦꯜ ꯏꯃꯦꯖꯁꯤꯡ ꯑꯁꯤ ꯃꯥꯔꯖꯤꯟ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯁꯦꯟꯇꯔ ꯇꯧꯕꯥ .mx-auto
ꯌꯥꯏ .
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">
<img src="..." class="rounded mx-auto d-block" alt="...">
<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>
ꯁꯥꯁꯁ ꯇꯧꯕꯥ꯫
ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ꯫
ꯏꯃꯦꯖ ꯊꯝꯕꯤꯕꯒꯤꯗꯃꯛ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯐꯪꯒꯅꯤ꯫
$thumbnail-padding: .25rem;
$thumbnail-bg: $body-bg;
$thumbnail-border-width: $border-width;
$thumbnail-border-color: $gray-300;
$thumbnail-border-radius: $border-radius;
$thumbnail-box-shadow: $box-shadow-sm;