bootstrap4で画像の形状を設定する方法

爱喝马黛茶的安东尼
リリース: 2019-07-17 16:30:33
オリジナル
2488 人が閲覧しました

bootstrap4で画像の形状を設定する方法

#角丸画像

.rounded クラスを使用すると、画像に角丸効果を表示できます:


<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
ログイン後にコピー

bootstrap4で画像の形状を設定する方法

#Ellipse picture

.rounded-circle クラスでは、楕円形の図:

<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
ログイン後にコピー

bootstrap4で画像の形状を設定する方法関連する推奨事項: 「

bootstrap 入門チュートリアル

Thumbnail

.img-thumbnail クラスは、画像のサムネイルを設定するために使用されます (画像には枠線があります):

Instance

<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
ログイン後にコピー

bootstrap4で画像の形状を設定する方法

画像の配置


画像の右揃えを設定するには .float-right クラスを使用し、画像の右揃えを設定するには .float-left クラスを使用します。画像の左揃えを設定するには:

Example

<img  src="paris.jpg" class="float-left" alt="bootstrap4で画像の形状を設定する方法" > <img  src="cinqueterre.jpg" class="float-right" alt="bootstrap4で画像の形状を設定する方法" >
ログイン後にコピー

bootstrap4で画像の形状を設定する方法##レスポンシブ画像

#画像にはさまざまなサイズがあるため、画面のサイズに応じて自動的に調整する必要があります。 bootstrap4で画像の形状を設定する方法 タグに .img-fluid クラスを追加することで、レスポンシブ画像を設定できます。

.img-fluid 类设置了 max-width: 100%; 、 height: auto; :
ログイン後にコピー

<img class="img-fluid" src="img_chania.jpg" alt="Chania">
ログイン後にコピー

以上がbootstrap4で画像の形状を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!