uniapp圖片展示自適應(yīng)等比例縮放方法舉例
在uniapp頁(yè)面展示中會(huì)遇到圖片展示問(wèn)題，等比縮放或者自適應(yīng)view大小。 只固定調(diào)整圖片的寬度（或者高度）而圖片的高度（或者寬度）可以自動(dòng)根據(jù)圖片原始比例調(diào)節(jié)的情況，這種情況下我們可以通過(guò)使用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中可能會(huì)遇到希望只調(diào)整圖片的寬度（或者高度）而圖片的高度（或者寬度）可以自動(dòng)根據(jù)圖片原始比例調(diào)節(jié)的情況，可以通過(guò)使用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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了幾種響應(yīng)式文字的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-05-05
斜杠可以在代碼中擁有多種含義，所以在 JavaScript 編程中，處理斜杠是一項(xiàng)非常重要的任務(wù)，本文就來(lái)帶大家一起來(lái)看看JavaScript是如何處理斜杠的2023-06-06
本文介紹了如何自定義trim方法，trim的作用就是去除字符串前后空格,這個(gè)方法在字符串處理方面很有實(shí)用價(jià)值，需要的朋友可以參考下2015-07-07
微信小程序中使用echarts的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序中使用echarts的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
刷新禁止用F5鍵刷新禁止右鍵這些在某些特殊情況下還是比較實(shí)用的，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-09-09
Bootstrap table右鍵功能實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了Bootstrap table右鍵功能的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
嵌入式iframe子頁(yè)面與父頁(yè)面js通信的方法
這篇文章主要介紹了嵌入式iframe子頁(yè)面與父頁(yè)面js通信的方法,實(shí)例分析了嵌入式iframe子頁(yè)面與父頁(yè)面js通信的常用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-01
跟我學(xué)習(xí)javascript的嚴(yán)格模式
跟我學(xué)習(xí)javascript的嚴(yán)格模式，對(duì)javascript嚴(yán)格模式進(jìn)行概述，進(jìn)入嚴(yán)格模式的方法，以及如何調(diào)用和相關(guān)語(yǔ)法，感興趣的小伙伴們可以參考一下2015-11-11
JavaScript基礎(chǔ)之運(yùn)算符與表達(dá)式詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript中一些常見(jiàn)的運(yùn)算符與表達(dá)式的具體使用，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起了解一下2023-04-04
僅IE9/10同時(shí)支持script元素的onload和onreadystatechange事件分析
測(cè)試結(jié)果可以看出，IE9后已經(jīng)開(kāi)始支持script的onload事件了。一直以來(lái)我們判斷js文件是否已經(jīng)加載完成就是用以上的兩個(gè)事件。2011-04-04