关于微信小程序界面css样式的问题急急急求大佬！

最近在做微信小程序，商城分类界面的css样式出了问题好像，图片怎么也顶部上去

并附上代码

页面代码

<view class="types">

  <scroll-view 

  class="left"

  >

    <view class="{{index==activeIndex?'active':''}}"  bindtap="click" data-index="{{index}}" wx:for="{{types}}">

      {{item.name}}

    </view>

  </scroll-view>

  <scroll-view

  class="right"

  >

  <view class="tittle">

    查看{{tittle}} 下的所有产品 >

  </view>

  <view class="container">

   <image src="{{pic}}" class="pic"></image>

   <view > {{text}}12312312312312312</view>

  </view>

  </scroll-view>

</view>

css样式代码

/* pages/types/types.wxss */

page{

  background:#cccccc;

  height: 100%;

  font-size:32rpx;

}

.types{

  display: flex;

  height: 100%;

}

.left{

  flex:2;

  height: 100%;

}

.left view{

  text-align: center;

  height: 90rpx;

  background:#ffffff;

  line-height: 90rpx;

}

.right{

  flex:8;

  height: 800rpx;

}

.right .tittle{

  background:#ffffff;

  text-align:center; 

  width:90%;

  line-height: 90rpx;

  margin:20rpx auto  0;

  border-radius: 10rpx;

}

.right .container{

  width: 90%;

  background:#ffffff;

  /* height: 1000rpx; */

  margin:20rpx auto  0;

}

.active{

  background:#cccccc;

}

.container .pic{

  float: left;

}

.container .pic{

  width: 100%;

  height:100%;

}

.types .left .active{

  background:red;

}

添代码片段吧，没有在控制台看下吗？

解决了，主页面有重复的css样式删掉就就好了。麻烦各位了感谢！

用控制台的小箭头放到图片那里看下目录结构

开发者工具新建一个代码片段，生成连接放出来

.container .pic{
  width: 100%;
  /*height:100%;  这行去掉*/
}
 

小程序里面的图片是由默认250的高度的，你要在 image 标签上 添加 mode 属性