溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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中怎么設置圖像形狀的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
