uniapp圖片展示自適應等比例縮放方法舉例

更新時間：2023年10月09日 16:27:49 作者：微微一笑嚇死誰

這篇文章主要給大家介紹了關于uniapp圖片展示自適應等比例縮放方法的相關資料,在uniapp頁面展示中會遇到圖片展示問題,等比縮放或者自適應view大小,需要的朋友可以參考下

在uniapp頁面展示中會遇到圖片展示問題，等比縮放或者自適應view大小。只固定調整圖片的寬度（或者高度）而圖片的高度（或者寬度）可以自動根據(jù)圖片原始比例調節(jié)的情況，這種情況下我們可以通過使用image標簽的mode屬性控制。

組件默認寬度 320px、高度 240px；

注意uniapp圖片標簽這里是image標簽不是img標簽

mode 有效值：

mode 有 14 種模式，其中 5 種是縮放模式，9 種是裁剪模式。

我們一般用到紅框里面的幾種。

具體的使用如下:

//限制寬度，等比縮放圖片大小
<image class="image" :src="circleUrl + message.payload.basePath" mode="widthFix" ></image>
//設置圖片最大寬度
.image{
		max-width: 400rpx;
	}

附：uniapp中圖片高度或者寬度自適應

在uniapp中可能會遇到希望只調整圖片的寬度（或者高度）而圖片的高度（或者寬度）可以自動根據(jù)圖片原始比例調節(jié)的情況，可以通過使用image標簽的mode屬性控制（注意這里是image標簽不是img標簽）

image標簽的mode屬性具有以下值可供選擇：

具體使用如下：

//希望設置寬度后高度等比例縮放
<image class="contentAimg" src="/static/home/hotserve2.png" mode="widthFix" />

總結

到此這篇關于uniapp圖片展示自適應等比例縮放的文章就介紹到這了,更多相關uniapp圖片展示自適應內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

幾種響應式文字詳解
本文主要介紹了幾種響應式文字的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧
2017-05-05
一文帶你探索JavaScript中斜杠的神秘世界
斜杠可以在代碼中擁有多種含義，所以在 JavaScript 編程中，處理斜杠是一項非常重要的任務，本文就來帶大家一起來看看JavaScript是如何處理斜杠的
2023-06-06
JavaScript如何自定義trim方法
本文介紹了如何自定義trim方法，trim的作用就是去除字符串前后空格,這個方法在字符串處理方面很有實用價值，需要的朋友可以參考下
2015-07-07
微信小程序中使用echarts的實現(xiàn)方法
這篇文章主要介紹了微信小程序中使用echarts的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04
js禁止頁面刷新禁止用F5鍵刷新禁止右鍵的示例代碼
刷新禁止用F5鍵刷新禁止右鍵這些在某些特殊情況下還是比較實用的，下面有個不錯的示例，感興趣的朋友可以參考下
2013-09-09
Bootstrap table右鍵功能實現(xiàn)方法
這篇文章主要為大家詳細介紹了Bootstrap table右鍵功能的實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02
嵌入式iframe子頁面與父頁面js通信的方法
這篇文章主要介紹了嵌入式iframe子頁面與父頁面js通信的方法,實例分析了嵌入式iframe子頁面與父頁面js通信的常用技巧,非常具有實用價值,需要的朋友可以參考下
2015-01-01
跟我學習javascript的嚴格模式
跟我學習javascript的嚴格模式，對javascript嚴格模式進行概述，進入嚴格模式的方法，以及如何調用和相關語法，感興趣的小伙伴們可以參考一下
2015-11-11
JavaScript基礎之運算符與表達式詳解
這篇文章主要為大家詳細介紹了JavaScript中一些常見的運算符與表達式的具體使用，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起了解一下
2023-04-04
僅IE9/10同時支持script元素的onload和onreadystatechange事件分析
測試結果可以看出，IE9后已經(jīng)開始支持script的onload事件了。一直以來我們判斷js文件是否已經(jīng)加載完成就是用以上的兩個事件。
2011-04-04