怎样让微信小程序camera拍照界面显示在屏幕中间,默认显示靠左

怎样让微信小程序camera拍照界面显示在屏幕中间,默认显示靠左


<camera device-position="back" style="width: 100%; height: 100vh;"></camera>

用一个 块级元素,然后css定位到屏幕中间,camera这个元素直接铺满这个块级元素就好了啊

加css样式定到中间去


<view style="margin: 100%;height: 300rpx;position: absolute;top: 50%;left:0; right:0; top:0; bottom:0;margin:auto;">
        <camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300rpx;"></camera>
    </view>

微信的官方demo没出现你说的情况

<!-- camera.wxml -->
<camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<view>预览</view>
<image mode="widthFix" src="{{src}}" style="width: 100%;"></image>
// camera.js
Page({
  takePhoto() {
    const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({
          src: res.tempImagePath
        })
      }
    })
  },
  error(e) {
    console.log(e.detail)
  }
})

使用css层叠样式表 进行样式的修饰

用一个大盒子 装着camera拍照界面 然后 使用垂直居中的样式进行排列

缩放 scaleToFill 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
缩放 aspectFit 保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
缩放 aspectFill 保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
缩放 widthFix 宽度不变,高度自动变化,保持原图宽高比不变

直接把width设为100%即可,如果宽不铺满100%默认就是靠左的

<!-- camera.wxml -->
<camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<view>预览</view>
<image mode="widthFix" src="{{src}}" style="width: 100%;"></image>


用view把他包起来,view样式写text-align:center试试