Home > TagScript > html,cssテンプレート >  Bootstrap > Bootstrap 4 ドキュメントの和訳

画像

新規作成日 2017-01-11
最終更新日

原文:Images

(親要素より大きくなることはない)レスポンシブ動作する画像を選ぶためのドキュメントと例と、それらに、すべてクラス経由で、軽量のスタイルを追加します。

レスポンシブ画像

Responsive images

Bootstrapの画像は、.img-fluidでレスポンシブで作成されます。max-width: 100%;とheight: auto;は、画像に適用されるため、それは、親要素に縮尺を合わせます。

Bootstrapの画像は、.img-fluidでレスポンシブで作成されます。

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

SVG画像とIE 10

SVG images and IE 10

Internet Explorer 10では、.img-fluidが付いたSVG画像は、不釣合いに大きさを決められます。これを修正するために、必要な場所に、width: 100% \9; を追加します。この修正により、他の画像フォーマットのサイズが不適切になります。それで、Bootstrapは、自動的に、それを適用しません。

画像のサムネイル

Image thumbnails

私たちのborder-radiusユーティリティに加えて、あなたは、画像に角の丸い1pxの枠の外観を与えるために、.img-thumbnailを使用することができます。

画像に角の丸い1pxの枠の外観を与えるために、.img-thumbnailを使用することができます。

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

イメージを整列させる

Aligning images

ヘルパー・フロート・クラステキストの整列クラスで画像を整列させます。ブロック・レベルの画像は、.mx-autoマージン・ユーティリティ・クラスを使用して、中央揃えすることができます。

ヘルパー・フロート・クラスやテキストの整列クラスで画像を整列させます。

<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">

画像を中央に配置

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

画像を中央に配置

<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

画像

Picture

あなたが、特定の<img>のための複数の<source>要素を指定するために、<picture>要素を使用している場合、.img-* クラスを、<picture>タグにではなく<img>に追加している事を確認して下さい。

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

Home Editor Tools Operation TagScript HPSpace

Copyright (C) 2011 Horio Kazuhiko(kukekko) All Rights Reserved.
kukekko@gmail.com
ご連絡の際は、お問い合わせページのURLの明記をお願いします。
「掲載内容は私自身の見解であり、所属する組織を代表するものではありません。」