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)文章
微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕后修改顏色
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕后修改顏色,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
js+css3實(shí)現(xiàn)簡(jiǎn)單時(shí)鐘特效
這篇文章主要為大家詳細(xì)介紹了js+css3實(shí)現(xiàn)簡(jiǎn)單時(shí)鐘特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
我們會(huì)經(jīng)常使用iframes來(lái)加載第三方的內(nèi)容、廣告或者插件。使用iframe是因?yàn)樗梢院椭黜?yè)面并行加載，不會(huì)阻塞主頁(yè)面。2011-07-07
Postman模擬發(fā)送帶token的請(qǐng)求方法
下面小編就為大家分享一篇Postman模擬發(fā)送帶token的請(qǐng)求方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
BootStrap響應(yīng)式導(dǎo)航條實(shí)例介紹
響應(yīng)式導(dǎo)航條就是可以在不同的設(shè)備下查看不同的效果。這篇文章主要介紹了BootStrap響應(yīng)式導(dǎo)航條實(shí)例介紹的相關(guān)資料，小編認(rèn)為本文介紹的非常的不錯(cuò)，特此分享給大家，供大家參考2016-05-05
下面小編就為大家?guī)?lái)一篇淺談JavaScript的全局變量與局部變量。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
javascript refresh page，頁(yè)面刷新實(shí)現(xiàn)代碼。2009-07-07
Knockout結(jié)合Bootstrap創(chuàng)建動(dòng)態(tài)UI實(shí)現(xiàn)產(chǎn)品列表管理
這篇文章主要為大家詳細(xì)介紹了Knockout結(jié)合Bootstrap創(chuàng)建動(dòng)態(tài)UI實(shí)現(xiàn)產(chǎn)品列表管理,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
Layui點(diǎn)擊圖片彈框預(yù)覽的實(shí)現(xiàn)方法
今天小編就為大家分享一篇Layui點(diǎn)擊圖片彈框預(yù)覽的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
打字效果動(dòng)畫(huà)的4種實(shí)現(xiàn)方法(超簡(jiǎn)單)
下面小編就為大家?guī)?lái)一篇打字效果動(dòng)畫(huà)的4種實(shí)現(xiàn)方法(超簡(jiǎn)單)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10