| vue 实现图片宽度100%、高度自适应的效果 | 您所在的位置：网站首页 › 浏览器高度自由 › vue 实现图片宽度100%、高度自适应的效果 |
vue 实现图片宽度100%、高度自适应的效果
|
实现图片宽度100%、高度自适应的效果，通过以下步骤实现： 1.在image组件上设置mode属性为widthFix，表示按照图片的宽度等比缩放，并保证图片宽度为100%。 2.在image组件上设置style属性，为图片设置高度自适应；可以使用CSS的height: auto属性来实现。 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 }, }, }; .container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .img { width: 100%; }实践 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%; }效果
|
【本文地址】
公司简介
联系我们