小程序image图片自适应,不压缩,不变形,原图填充有以下方法:
方法一:使用
image做背景图
,宽设100%,使用mode属性下的widthfixswiper-video-image组件的image的mode默认为scaleToFill,找到该组件,将mode改为widthfix
<template>
<view class="content">
<view class="screen-swiper-box">
<swiper :current="index" @change="swiperChange" class="screen-swiper" indicator-dots="true" :circular="circular"
:autoplay="autoplay" :interval="interval" duration="500" :style="[whStyle]">
<swiper-item v-for="(item, i) in list" :key="i" :id="i">
<video v-if="item[typeName] == videoValue" :id="'myVideo-'+i" class="myVideo" :src="item[linkName]"
controls objectFit="cover" enable-progress-gesture="false" show-loading="true"
play-btn-position="center" show-fullscreen-btn="true" :style="[whStyle]"
@click="swiperClick(item,i)"></video>
<image v-if="item[typeName] == imgvalue" class="swiperImage" :src="item[linkName]" mode="widthFix"
:style="[whStyle]" @click="swiperClick(item,i)">
</image>
</swiper-item>
</swiper>
</view>
</view>
</template>
<script>
缩放模式 | |
---|---|
mode值 | 说明 |
scaleToFill | (默认值)缩放形式,不保持纵横比缩放图片 ,使图片的宽高完全拉伸至填满 image 元素 |
aspectFit | 缩放模式,保持纵横比缩放图片 ,使图片的短边能完全显示出来。也就是说,可以完整的将图片显示出来 |
aspectFill | 缩放模式,保持纵横比缩放图片 ,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。 |
widthFix | 缩放模式,宽度不变,高度自动变化 ,保持原图宽高比不变。 |
hightFix | 缩放模式,高度不变,宽度自动变化 ,保持原图宽高比不变。 |
裁剪模式 | |
---|---|
mode值 | 说明 |
top | 不缩放图片,只显示图片的顶部区域 |
bottom | 不缩放图片,只显示图片的底部区域 |
center | 不缩放图片,只显示图片的中间区域 |
left | 不缩放图片,只显示图片的左边区域 |
right | 不缩放图片,只显示图片的右边区域 |
top left | 不缩放图片,只显示图片的左上边区域 |
top right | 不缩放图片,只显示图片的右上边区域 |
bottom left | 不缩放图片,只显示图片的左下边区域 |
bottom right | bottom right 不缩放图片,只显示图片的右下边区域 |
方法二:
使用
background-image
做背景图,给div设置固定高度
//给这层div添加固定高度,使用background-size: contain;
position: relative;
height: 260px;
background-image: url(imgurl); //imgurl图片地址
background-size: contain;
background-position: bottom;
background-repeat:no-repeat;
方法三:
小程序使用 rpx也可以自适应。