第聊聊Bootstrap中的圖片組件和輪廓組件本篇文章帶大家一起了解一下Bootstrap中的圖片組件和輪廓組件，介紹一下響應(yīng)式圖片、圖片縮略圖、picture標(biāo)簽和輪廓（Figures），希望對(duì)大家有所幫助！

本文節(jié)將學(xué)習(xí)如何讓圖片支持響應(yīng)式行為（這樣它們就不會(huì)超出父元素的范圍）以及如何通過類（class）添加些許樣式。

1.1響應(yīng)式圖片

通過Bootstrap所提供的.img-fluid類讓圖片支持響應(yīng)式布局。其原理是將max-width:100%;和height:auto;賦予圖片，以便隨父元素一起縮放。

!doctypehtml

html

head

metacharset=utf-8

metaname=viewportcontent=width=device-width,initial-scale=1

metaname=keywordscontent=

metaname=descriptioncontent=

linkhref=bootstrap5/bootstrap.min.CSSrel=stylesheet

title圖片演示/title

/head

body

div

imgsrc=pic/taohua.jpgalt=桃花朵朵開

/div

scriptsrc=bootstrap5/bootstrap.bundle.min.js/script

/body

/html

上面contAIner是為了讓圖片居中顯示切四周有邊距，不是圖像組件的一部分，下面是演示錄像。

10.1.2圖片縮略圖

除了通用類提供的提供的border-radius外，你還可以使用.img-thumbnail使圖片的外觀具有1px寬度的圓形邊框。

!doctypehtml

htmllang=zh-CN

head

metacharset=utf-8

metaname=viewportcontent=width=device-width,initial-scale=1

metaname=keywordscontent=

metaname=descriptioncontent=

linkhref=bootstrap5/bootstrap.min.cssrel=stylesheet

style

.div1{width:300;height:300px;text-align:center;padding-top:50px;}

/style

title圖片演示/title

/head

body

div>

這個(gè)組件也是響應(yīng)式的，不過我只給出了截圖,上面css的樣式是為了讓圖片不靠近邊上，不要不可能看不到邊框，其實(shí)直接使用container也一樣，在此只是為了不使用container免得大家以為container也是其中一部分。

1.3picture標(biāo)簽

picture元素通過包含一個(gè)或多個(gè)source元素和一個(gè)img元素再結(jié)合media（媒體查詢）來使用，根據(jù)屏幕匹配的不同尺寸顯示不同圖片，如果沒有匹配到或?yàn)g覽器不支持picture屬性則使用img元素，一個(gè)picture元素?zé)o論指定幾個(gè)source，只會(huì)顯示其中的一個(gè)或者img。

如果你使用元素為某個(gè)img指定多個(gè)source元素的話，請(qǐng)確保將.img-*類添加到img元素而不是picture元素或者source元素上。

source元素排列是有順序的。媒體查詢的值，如果是max-width，則從小到大排序；如果是min-width，則按從大到小的順序排列。下面是源碼，源碼中js代碼是獲取屏幕寬度，作為對(duì)照。

!doctypehtml

htmllang=zh-CN

head

metacharset=utf-8

metaname=viewportcontent=width=device-width,initial-scale=1

metaname=keywordscontent=

metaname=descriptioncontent=

linkhref=bootstrap5/bootstrap.min.cssrel=stylesheet

title圖片演示/title

/head

body

div>

下面是演示

2%20輪廓（Figures）

通過%20Bootstrap%20的輪廓（figure）組件來顯示相關(guān)聯(lián)的圖片和文本。任何時(shí)候需要顯示一段內(nèi)容（例如帶有可選標(biāo)題的圖片），請(qǐng)使用figure標(biāo)簽。

使用內(nèi)置的.figure、.figure-img和.figure-caption類別，可提供HTML5figure和figcaption標(biāo)簽一些基本樣式設(shè)定。圖片沒有明確尺寸，請(qǐng)務(wù)必在img標(biāo)簽加上%20.img-fluid類別設(shè)定為響應(yīng)式圖片。

事實(shí)上，輪廓組件不僅用于圖片，在前一節(jié)文字排版部分，引用來源部分就已經(jīng)使用了輪廓組件。

!doctype%20html

html%20lang=zh-CN

%20%20head

%20%20%20%20meta%20charset=utf-8

%20%20%20%20meta%20name=viewport%20content=width=device-width,%20initial-scale=1

%20%20%20%20meta%20name=keywords%20content=

%20%20%20%20meta%20name=description%20content=

%20%20%20%20link%20href=bootstrap5/bootstrap.min.css%20rel=stylesheet

%20%20%20%20titlefigure演示/title

%20%20/head

%20%20body

%20%20%20%20%20%20%20%20div%20>

簡(jiǎn)單解釋一下img標(biāo)簽里面的類rounded是圖片四周為圓角，不需要可以不寫。figcaption標(biāo)簽里面的類text-center是圖片