Bootstrap5 圖像形狀

圓角圖片

.rounded 類可以讓圖片顯示圓角效果：

為賓陽等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及賓陽網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站建設(shè)、網(wǎng)站制作、賓陽網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

實(shí)例

<
img

decoding
=
"
async
"

src
=
"
cinqueterre.jpg
"

class
=
"
rounded
"

alt
=
"
Cinque Terre
"
>

嘗試一下 ?

橢圓圖片

.rounded-circle 類可以設(shè)置橢圓形圖片:

實(shí)例

<
img

decoding
=
"
async
"

src
=
"
cinqueterre.jpg
"

class
=
"
rounded-circle
"

alt
=
"
Cinque Terre
"
>

嘗試一下 ?

縮略圖

.img-thumbnail 類用于設(shè)置圖片縮略圖(圖片有邊框):

實(shí)例

<
img

decoding
=
"
async
"

src
=
"
cinqueterre.jpg
"

class
=
"
img-thumbnail
"

alt
=
"
Cinque Terre
"
>

嘗試一下 ?

圖片對齊方式

使用 .float-start 類來設(shè)置圖片左對齊，使用 .float-end 類設(shè)置圖片右對齊:

實(shí)例

<
img

decoding
=
"
async
"

src
=
"
paris.jpg
"

class
=
"
float-start
"
>

<
img

decoding
=
"
async
"

src
=
"
cinqueterre.jpg
"

class
=
"
float-end
"
>

嘗試一下 ?

圖片居中

使用 .mx-auto (margin:auto) 和 .d-block (display:block) 類來設(shè)置圖片居中對齊：

實(shí)例

<
img

decoding
=
"
async
"

src
=
"
paris.jpg
"

class
=
"
mx-auto d-block
"
>

嘗試一下 ?

響應(yīng)式圖片

圖像有各種各樣的尺寸，我們需要根據(jù)屏幕的大小自動(dòng)適應(yīng)。

我們可以通過在 標(biāo)簽中添加 .img-fluid 類來設(shè)置響應(yīng)式圖片。

.img-fluid 類設(shè)置了 max-width: 100%; 、 height: auto; :

實(shí)例

<
img

decoding
=
"
async
"

class
=
"
img-fluid
"

src
=
"
img_chania.jpg
"

alt
=
"
Chania
"
>

嘗試一下 ?

本文題目：創(chuàng)新互聯(lián)Bootstrap5教程：Bootstrap5 圖像形狀
本文URL：http://www.fisionsoft.com.cn/article/djjocos.html