ImageView scaling in ListView

Question

I'm developing an app using the Appcelerator platform and I've run into an issue.

I have a listview with a custom template where I'm populating an ImageView with remote images (lots of different sizes). I'd like them to scale to 100% width and auto height ( Ti.UI.Fill and Ti.UI.SIZE for width and height).

This works if I don't set a height for the image's container, but I'd like all of my ListItems to have the same height and mask any overflow from too tall images.

When I set a fixed height it tries to fit the image in the container, so there's borders on the left/right or top/bottom, depending on the aspect ratio of the image (seems to ignore Ti.UI.Fill).

There's a trick with using a ScrollView as a container and disabling scrolling on that to achieve what I want, but adding a ScrollView inside a Listview crashes the app.

Would this be achievable?

EDIT: Adding some sample code.

This is my Template declaration:

            <Templates>
            <ItemTemplate name="eventsListTemplate">
                <Label bindId="name" id="name" />
                <View id="coverContainer">
                    <ImageView bindId="cover" id="cover" />
                    <View id="overlay"></View>
                </View>
                <Label bindId="startTime" id="startTime" />
                <Label bindId="place" id="place" />
            </ItemTemplate>
        </Templates>

This is where I'm populating a listitem with data:

            var mapped = _.map(events,function(event){
            return {
                name : { text : event.name },
                cover : { image : (event.cover) ? event.cover.source : ''},
                startTime : { text : Alloy.Globals.formatDate(event.startTime) },
                place : { text : (event.place) ? event.place.name : event.owner.name },
                id : event.id
            };
        });

And the relevant styles:

"#cover" :{
width: Titanium.UI.FILL,
height : Titanium.UI.SIZE
},
"#coverContainer":{
height: 120
},

Answer 1

Okay, so I didn't find out how to do this with Titanium automatically.

Luckily I had control over the remote data and was able to include the image's original widths and heights with the data.

So, if you set fixed values for the ImageView, it doesn't try to fit it itself anymore and uses those. Then it was a matter of calculating new dimensions for the image based on the device's width and assigning those ( plus a few conditionals for cases where the height would end up lower than the container).

If this was web development setting width: 100%; height: auto; plus oveflow: hidden; for the container would've done the trick.