小程序
小游戏
企业微信
微信支付
扫描小程序码分享
如题，在webView模式下就可以正常显示图片高度，但是skyline模式下只显示了跟图片一样的高度，height都是auto，而且官方image文档也没有对这个widthFix适不适用skyline进行标注。
webView：
skyline：
1 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
你好，麻烦提供出现问题的具体机型、微信版本号、系统版本号，以及能复现问题的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
<view class="container"
bindtouchstart="onTouchStart"
bindtouchmove="onTouchMove"
bindtouchend="onTouchEnd">
<snapshot id="sst1" class="sst">
<view class="imageList">
<!-- 图片容器 -->
<view class="image-wrapper">
<image
src="{{imageUrl}}"
class="scalable-image"
bindload="onImageLoad"
mode="widthFix"
style="transform: translate({{offsetX}}px, {{offsetY}}px) scale({{scale}});"
></image>
</view>
<!-- <view class="image-wrapper">
mode="aspectFit"
</view> -->
</snapshot>
<view><button type="primary" bind:tap="save2local">保存</button></view>
<!-- 调试信息 -->
<view class="debug-info" wx:if="{{debug}}">
<text>缩放: {{scale}}x</text>
<text>偏移: ({{offsetX}}, {{offsetY}})</text>
<text>触摸点: ({{lastTouchX}}, {{lastTouchY}})</text>
hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
})
},
onInputChange(e) {
const nickName = e.detail.value
const { avatarUrl } = this.data.userInfo
this.setData({
"userInfo.nickName": nickName,
getUserProfile(e) {
// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
wx.getUserProfile({
desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
success: (res) => {
console.log(res)
userInfo: res.userInfo,
hasUserInfo: true
}
width: 80%;
aspect-ratio: 800/800;
/* height: 80%; */
margin: 10rpx 0;
overflow: hidden;
border: dashed 1px green;
display: flex;
justify-content: center;
.scalable-image {
display: block;
width: 100%;
height: 100%;
.debug-info {
position: fixed;
top: 20rpx;
left: 20rpx;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 20rpx;
border-radius: 10rpx;
font-size: 24rpx;
flex-direction: column;
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
你好，麻烦提供出现问题的具体机型、微信版本号、系统版本号，以及能复现问题的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）
<view class="container"bindtouchstart="onTouchStart"bindtouchmove="onTouchMove"bindtouchend="onTouchEnd"><snapshot id="sst1" class="sst"><view class="imageList"><!-- 图片容器 --><view class="image-wrapper"><imagesrc="{{imageUrl}}"class="scalable-image"bindload="onImageLoad"mode="widthFix"style="transform: translate({{offsetX}}px, {{offsetY}}px) scale({{scale}});"></image></view><!-- <view class="image-wrapper"><imagesrc="{{imageUrl}}"class="scalable-image"bindload="onImageLoad"mode="aspectFit"style="transform: translate({{offsetX}}px, {{offsetY}}px) scale({{scale}});"></image></view> --></view></snapshot><view><button type="primary" bind:tap="save2local">保存</button></view><!-- 调试信息 --><view class="debug-info" wx:if="{{debug}}"><text>缩放: {{scale}}x</text><text>偏移: ({{offsetX}}, {{offsetY}})</text><text>触摸点: ({{lastTouchX}}, {{lastTouchY}})</text></view></view>hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,})},onInputChange(e) {const nickName = e.detail.valueconst { avatarUrl } = this.data.userInfothis.setData({"userInfo.nickName": nickName,hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,})},getUserProfile(e) {// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗wx.getUserProfile({desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写success: (res) => {console.log(res)this.setData({userInfo: res.userInfo,hasUserInfo: true})}})},},})width: 80%;aspect-ratio: 800/800;/* height: 80%; */margin: 10rpx 0;overflow: hidden;border: dashed 1px green;display: flex;justify-content: center;}.scalable-image {display: block;width: 100%;height: 100%;}.debug-info {position: fixed;top: 20rpx;left: 20rpx;background: rgba(0, 0, 0, 0.7);color: white;padding: 20rpx;border-radius: 10rpx;font-size: 24rpx;display: flex;flex-direction: column;}