vue 实现图片宽度100%、高度自适应的效果
实现图片宽度100%、高度自适应的效果,通过以下步骤实现:
1.在image组件上设置mode属性为widthFix,表示按照图片的宽度等比缩放,并保证图片宽度为100%。
2.在image组件上设置style属性,为图片设置高度自适应;可以使用CSS的height: auto属性来实现。
<template>
<view class="container">
<image class="img" mode="widthFix" :src="imageUrl" :style="{ height: imgHeight + 'px' }" @load="onImgLoad" />
</view>
</template>
<script>
export default {
data() {
return {
imageUrl: 'https://picsum.photos/400/300',
imgHeight: 0,
};
},
methods: {
onImgLoad(e) {
// 当图片加载完成后,获取图片的原始宽度和高度,并根据宽度计算出高度
const { width, height } = e.mp.detail;
this.imgHeight = (height / width) * 100; // 高度 = 原始高度 / 原始宽度 * 100
},
},
};
</script>
<style>
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.img {
width: 100%;
}
</style>
实践
<!-- 我要入驻 -->
<view class="settleIn" @click="goto('/pages/business/settleIn/settleIn')">
<image class="img" mode="widthFix" :src="settleInImageSrc" :style="{ height: imgHeight + 'px' }"
@load="onImgLoad" />
</view>
data(){
return:{
// 申请入驻图片
settleInImageSrc: "",
imgHeight: 0,
}
}
methods:{
// 图片自适应
onImgLoad(e) {
// 当图片加载完成后,获取图片的原始宽度和高度,并根据宽度计算出高度
const {
width,
height
} = e.mp.detail;
this.imgHeight = (height / width) * 100; // 高度 = 原始高度 / 原始宽度 * 100
},
}
.settleIn {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.img {
width: 100%;
}
效果
xingming_s: 方法三有效,全局修改
Ivy@HPC: 文章对蓝牙开发的基础讲解清晰,涵盖了分类、权限和位置访问的运行时权限请求流程,适合初学者入门Android蓝牙开发,内容全面,易于理解,推荐给正在学习蓝牙开发的朋友们。
liyinchi1988: 谢谢
liyinchi1988: 对,除非是二维码扫码登录,才不需要在微信环境下
insist_life: 第二个问题:前端不管有没有用到jssdk,都需要在微信环境下(生态下)才能向用户发起授权,是吗