bootstrap4中怎么設置圖像形狀，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：空間域名、網站空間、營銷軟件、網站建設、麻陽網站維護、網站推廣。

圓角圖片

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

實例

<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">

橢圓圖片

.rounded-circle 類可以設置橢圓形圖片:

實例

<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">

相關推薦：《bootstrap入門教程》

縮略圖

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

實例

<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">

圖片對齊方式

使用 .float-right 類來設置圖片右對齊，使用 .float-left 類設置圖片左對齊:

實例

<img src="paris.jpg" class="float-left"> <img src="cinqueterre.jpg" class="float-right">

響應式圖片

圖像有各種各樣的尺寸，我們需要根據屏幕的大小自動適應。

我們可以通過在 <img> 標簽中添加 .img-fluid 類來設置響應式圖片。

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

實例

<img class="img-fluid" src="img_chania.jpg" alt="Chania">

看完上述內容，你們掌握bootstrap4中怎么設置圖像形狀的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注創新互聯行業資訊頻道，感謝各位的閱讀！

新聞名稱：bootstrap4中怎么設置圖像形狀-創新互聯
標題路徑：http://vcdvsql.cn/article22/csegcc.html

成都網站建設公司_創新互聯，為您提供云服務器、網站設計、網站策劃、網站建設、虛擬主機、動態網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯