如何在其父级内正确缩放 Titanium ImageView？

Question

我正在使用 Windows 10 开始学习 Titanium SDK 6.0.1.GA 和 Alloy 1.9.8，我想显示一个 ImageView，其中填充了从图库中选择的图像，该组件放置在我的视图中.xml 像这样：

<Alloy>
    <Window class="container">
        <ActionBar id="actionBar" platform="android" title="Contact Details"></ActionBar>
        <Menu>
            <MenuItem id="saveContactMenu" title="Save" onClick="saveContact"/>
        </Menu>
    <View class="contact-details-holder">
      <View class="contact-photo-holder" onClick="openOptions">
        <ImageView id="photo" class="contact-photo"/>
      </View>
      <View class="contact-info-holder">
        <Label class="label">Nombre</Label>
        <Label id="fullname" class="text"/>
      </View>
      <View class="address-info-holder">
        <View class="address-holder">
          <Label class="label">Direccion</Label>
          <Label id="address" class="text"/>
        </View>
        <View class="map-holder">
        </View>
      </View>
      <View class="contact-info-holder">
        <Label class="label">T</Label>
        <Label id="phone" class="text"/>
      </View>
    </View>
        <OptionDialog id="photoDialog" title="Select source" onClick="handleSelectedOption" cancel="3">
        <Options>
            <Option>Camera</Option>
            <Option>Photo Gallery</Option>
                        <Option>From the Web</Option>
            <Option>Cancel</Option>
        </Options>
    </OptionDialog>
    </Window>
</Alloy>

.tss 是：

'.container' : {
  width : Ti.UI.FILL,
  height : Ti.UI.FILL,
  backgroundColor:'white'
}

'.contact-details-holder' : {
  width : Ti.UI.FILL,
  height : Ti.UI.SIZE,
  layout: "vertical"
}

'.contact-photo-holder': {
        width : Ti.UI.FILL,
        height : '44 dp',
    top: 0,
    backgroundColor: "pink"
}

'.contact-photo': {
    width : Ti.UI.SIZE,
  height: Ti.UI.SIZE
}

'.contact-info-holder' : {
  width : Ti.UI.FILL,
  height: Ti.UI.SIZE,
  top: 0,
  layout: "vertical",
  backgroundColor: "lime"
}

'.label': {
    width : Ti.UI.SIZE,
    height:  Ti.UI.FILL,
  left : 0,
  font: {
      fontFamily:'Helvetica',
      fontSize: '12dp',
      fontStyle: 'normal',
      fontWeight: 'normal'
  },
    color: '#343434'
}

'.text': {
    width : Ti.UI.SIZE,
    height:  Ti.UI.FILL,
  left : 0,
  font: {
      fontFamily:'Helvetica',
      fontSize: '12dp',
      fontStyle: 'normal',
      fontWeight: 'normal'
  },
    color: 'black'
}

View 的宽度设置为 Ti.UI.FILL，高度设置为 44 dps，而 ImageView 的宽度和高度设置为 Ti.UI.SIZE，我希望图像大小为原始图像和视图将剪辑在其顶部，仅显示图像的中心，但如下图所示：

我是否在 tss 中应用了错误的样式？

Answer 1

试试这个

.xml

<View class="contact-photo-holder" onClick="openOptions">
  <View id="photoContainer">
    <ImageView id="photo" class="contact-photo"/>
  </View>
</View>

.tss

"#photoContainer":{
    width : Ti.UI.FILL,
    height : Ti.UI.SIZE
}
"#photo":{
    left: 0,
    right : 0,
    height : "auto"
}