bootstrap4中怎么設置圖像形狀

發布時間：2021-07-23 14:12:45 來源：億速云閱讀：126 作者：Leah 欄目：開發技術

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中怎么設置圖像形狀的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！

向AI問一下細節

中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站