如何在uniapp框架下實現用戶上傳圖片的自適應顯示而不拉伸或裁剪？

uniapp下實現圖片自適應顯示，避免拉伸或裁剪

開發類似小紅書的應用時，用戶上傳圖片尺寸不一，如何在不失真情況下自適應顯示是個挑戰。本文提供Uniapp框架下的解決方案，確保圖片完整顯示，并根據比例自適應。

需求：

用戶上傳多圖并添加文字發布，圖片需自適應顯示，不拉伸、不裁剪，保持原比例。

解決方案：

利用css的background-size: contain屬性實現。該屬性確保圖片在保持寬高比的同時，最大程度地填充容器，避免拉伸或裁剪。

代碼示例：

<div class="container">   <div class="img" :style="{backgroundImage: 'url(' + imageUrl + ')'}"></div> </div>

.container {   width: 500px;   height: 300px;   border: 1px solid #000;   overflow: hidden; /* 隱藏超出容器的部分 */ }  .img {   width: 100%;   height: 100%;   background-size: contain;   background-position: center center; /* 居中顯示 */   background-repeat: no-repeat; }

代碼解釋：

• .container：定義圖片容器的固定尺寸。overflow: hidden 用于隱藏可能超出容器的圖片部分。
• .img：使用background-image動態設置圖片URL (imageUrl為圖片鏈接)。background-size: contain 保證圖片完整顯示且不失真，background-position: center center將圖片居中。

此方法適用于Uniapp及其他支持CSS的框架。通過調整css屬性，輕松實現圖片自適應顯示，滿足類似小紅書的展示需求。 imageUrl 需要在你的數據綁定中動態賦值，例如通過v-for循環遍歷圖片數組。 記得處理圖片加載失敗的情況，可以添加一個默認圖片或加載狀態提示。