Bootstrap5圖片響應式：自適應屏幕的圖片處理技巧

本文介紹Bootstrap5實現圖片響應式處理的方法。網頁圖片需適配不同設備屏幕，Bootstrap5通過img-fluid類解決此問題：該類使圖片max-width:100%、height:auto，自動適應父容器寬度並保持寬高比，避免溢出或變形。 除基礎自適應外，還提供多種美化類：rounded（圓角）、rounded-circle（圓形，需正方形圖片）、img-thumbnail（帶邊框縮略圖）。對齊方式有居中（結合d-block和mx-auto）、左/右浮動（float-start/end）。 優化加載方面，建議壓縮圖片並可結合srcset/sizes實現多尺寸適配。需注意：僅用img-fluid可能導致高度溢出，需確保父容器高度合理或用object-fit:cover；對齊時浮動類可能影響排版，需注意清除浮動。 核心是添加img-fluid實現自適應，按需搭配樣式類和對齊類，即可快速構建美觀響應式圖片。