programape123

发布：2020-10-24 16:48
更新：2021-06-15 15:00
阅读：1502

【报Bug】H5下image组件widthfix模式图片宽高比变化，图片被拉长

分类：uni-app

bug反馈

产品分类： uniapp/H5

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： windows10

HBuilderX类型：正式

HBuilderX版本号： 2.9.3

浏览器平台： Chrome

项目创建方式： HBuilderX

操作步骤：

<image src="" mode="widthFix"></image>

预期结果：

宽度不变，高度自动变化，保持原图宽高比不变

实际结果：

图片被拉长了

bug描述：

H5下image组件widthfix模式图片高度没有按比率自适应

2020-10-24 16:48 负责人:无分享

5 个回复

3***@qq.com

我也遇到了同样的问题，不放到popup里是正常的。
当image的mode设置widthfix属性,并且popup组件type设置center会出现高度拉伸的问题，
但是popup的type设置bottom则是正常显示。

DCloud_UNI_GSQ

提供一个能复现问题的测试工程

programape123 (作者)

<template>  
    <view class="my-popup">   
        <uni-popup ref="popup" type="center" :maskClick="false">  
            <view class="popup-wrap">  
                <image :src="" mode="widthFix"></image>  
            </view>  
        </uni-popup>  
    </view>  
</template>  

<script>  
    import uniPopup from '@/components/uni-popup/uni-popup.vue';  

    export default {  
        components: {  
            uniPopup  
        },  
        data() {  
            return {  
            };  
        },  
        onReady() {  
            setTimeout(()=>{  
                this.$refs.popup.open();  
            })  
        }  
    }  
</script>  

<style scoped>  
/deep/ .my-popup .uni-popup__wrapper-box {  
    background: none!important;  
    max-width: unset!important;  
    max-height: unset!important;  
}  
.popup-wrap{  
    width: 80vw;  
}  
.popup-wrap uni-image{  
    width: 100%;  
}  
</style>

DCloud_UNI_GSQ

如果不放在popup内是否正常？

2020-10-28 18:22
半晴雨滴

回复 DCloud_UNI_GSQ: 现在还是有这个问题，能不能修复一下？只要在popup就不正常

2021-01-15 11:24

简丹 - 知足知不足有为有弗为

我也遇到了同样的问题。
图片是4:3=1.3333...的，image设置widthfix，不在popup是正常的，在默认type的popup里比例是1.11111...。

按上一位说的设置type="bottom"时比例的确是对的，盼尽快修正！

冰无漪

在data里边加一个widthFix:"widthFix"
比如这样

export default {
data(){
return {
shopProductIds:"",
widthFix:"widthFix"
}
},
methods: {
}
};

我就是这样写了后图片的高度就能自动变化了

该问题目前已经被锁定, 无法添加新回复

【报Bug】H5下image组件widthfix模式图片宽高比变化，图片被拉长

操作步骤：

<image src="" mode="widthFix"></image>

预期结果：

宽度不变，高度自动变化，保持原图宽高比不变

实际结果：

图片被拉长了

bug描述：

5 个回复

公告

相关问题

【报Bug】H5下image组件widthfix模式图片宽高比变化，图片被拉长

操作步骤： <image src="" mode="widthFix"></image>

预期结果： 宽度不变，高度自动变化，保持原图宽高比不变

实际结果： 图片被拉长了

bug描述：

与内容相关的链接

5 个回复

公告

相关问题

操作步骤：

<image src="" mode="widthFix"></image>

预期结果：

宽度不变，高度自动变化，保持原图宽高比不变

实际结果：

图片被拉长了