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

#角丸画像

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

例

<img class="rounded lazy"  src="/static/imghw/default1.png"  data-src="cinqueterre.jpg"    alt="Cinque Terre">

#Ellipse picture

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

例

<img class="rounded-circle lazy"  src="/static/imghw/default1.png"  data-src="cinqueterre.jpg"    alt="Cinque Terre">

関連する推奨事項: 「

bootstrap 入門チュートリアル

」

Thumbnail

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

Instance

<img class="img-thumbnail lazy"  src="/static/imghw/default1.png"  data-src="cinqueterre.jpg"    alt="Cinque Terre">

画像の配置

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

Example

<img  class="float-left lazy"  src="/static/imghw/default1.png"  data-src="paris.jpg"    alt="bootstrap4で画像の形状を設定する方法" > <img  class="float-right lazy"  src="/static/imghw/default1.png"  data-src="cinqueterre.jpg"    alt="bootstrap4で画像の形状を設定する方法" >

##レスポンシブ画像

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

.img-fluid 类设置了 max-width: 100%; 、 height: auto; :

例

<img class="img-fluid lazy"  src="/static/imghw/default1.png"  data-src="img_chania.jpg"    alt="Chania">

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