uniapp圖片展示自適應(yīng)等比例縮放方法舉例
更新時間：2023年10月09日 16:27:49 作者：微微一笑嚇?biāo)勒l
這篇文章主要給大家介紹了關(guān)于uniapp圖片展示自適應(yīng)等比例縮放方法的相關(guān)資料,在uniapp頁面展示中會遇到圖片展示問題,等比縮放或者自適應(yīng)view大小,需要的朋友可以參考下
在uniapp頁面展示中會遇到圖片展示問題，等比縮放或者自適應(yīng)view大小。 只固定調(diào)整圖片的寬度（或者高度）而圖片的高度（或者寬度）可以自動根據(jù)圖片原始比例調(diào)節(jié)的情況，這種情況下我們可以通過使用image標(biāo)簽的mode屬性控制。
組件默認(rèn)寬度 320px、高度 240px；
注意uniapp圖片標(biāo)簽這里是image標(biāo)簽不是img標(biāo)簽
mode 有效值：
mode 有 14 種模式，其中 5 種是縮放模式，9 種是裁剪模式。
我們一般用到紅框里面的幾種。
具體的使用如下:
//限制寬度，等比縮放圖片大小
<image class="image" :src="circleUrl + message.payload.basePath" mode="widthFix" ></image>
//設(shè)置圖片最大寬度
.image{
max-width: 400rpx;
}附：uniapp中圖片高度或者寬度自適應(yīng)
在uniapp中可能會遇到希望只調(diào)整圖片的寬度（或者高度）而圖片的高度（或者寬度）可以自動根據(jù)圖片原始比例調(diào)節(jié)的情況，可以通過使用image標(biāo)簽的mode屬性控制（注意這里是image標(biāo)簽不是img標(biāo)簽）
image標(biāo)簽的mode屬性具有以下值可供選擇：
具體使用如下：
//希望設(shè)置寬度后高度等比例縮放 <image class="contentAimg" src="/static/home/hotserve2.png" mode="widthFix" />
總結(jié)
到此這篇關(guān)于uniapp圖片展示自適應(yīng)等比例縮放的文章就介紹到這了,更多相關(guān)uniapp圖片展示自適應(yīng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了幾種響應(yīng)式文字的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-05-05
斜杠可以在代碼中擁有多種含義，所以在 JavaScript 編程中，處理斜杠是一項非常重要的任務(wù)，本文就來帶大家一起來看看JavaScript是如何處理斜杠的2023-06-06
本文介紹了如何自定義trim方法，trim的作用就是去除字符串前后空格,這個方法在字符串處理方面很有實用價值，需要的朋友可以參考下2015-07-07
這篇文章主要介紹了微信小程序中使用echarts的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
刷新禁止用F5鍵刷新禁止右鍵這些在某些特殊情況下還是比較實用的，下面有個不錯的示例，感興趣的朋友可以參考下2013-09-09
這篇文章主要為大家詳細介紹了Bootstrap table右鍵功能的實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要介紹了嵌入式iframe子頁面與父頁面js通信的方法,實例分析了嵌入式iframe子頁面與父頁面js通信的常用技巧,非常具有實用價值,需要的朋友可以參考下2015-01-01
跟我學(xué)習(xí)javascript的嚴(yán)格模式
跟我學(xué)習(xí)javascript的嚴(yán)格模式，對javascript嚴(yán)格模式進行概述，進入嚴(yán)格模式的方法，以及如何調(diào)用和相關(guān)語法，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要為大家詳細介紹了JavaScript中一些常見的運算符與表達式的具體使用，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起了解一下2023-04-04
僅IE9/10同時支持script元素的onload和onreadystatechange事件分析
測試結(jié)果可以看出，IE9后已經(jīng)開始支持script的onload事件了。一直以來我們判斷js文件是否已經(jīng)加載完成就是用以上的兩個事件。2011-04-04