How to scale correctly Titanium ImageView inside its parent?

Question

I'm working on Windows 10 starting to learn Titanium SDK 6.0.1.GA and Alloy 1.9.8, I want to display an ImageView filled with an image chosen from the gallery, this component is placed inside a View in my .xml like this:

<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>

For which the .tss is:

'.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'
}

The View has its width set to Ti.UI.FILL and the height to 44 dps, while the ImageView has its width and height set to Ti.UI.SIZE, with this I would expect the image size to be that of the original image and the View would clip on top of it showing only the center of the image, but it's shown like this following image:

Am I applying the wrong styles in the tss?

Answer 1

try this

.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"
}