Image scaling in sprite in Internet Explorer

[gilescambray]

Hi.

I was wondering whether someone could help me. I'm creating a load of sprites, into which I'm adding an image, so that they can be eventually manipulated in size into some type of carousel. I'd like the image in each sprite to be scaled to the dimensions of that sprite.

Unfortunately the image scaling doesn't work in IE8 (VML I'm guessing). Am I doing something wrong? Seems find in Chrome.

As always, thanks in advance.



this.drawComponent = Ext.create('Ext.draw.Component', {
viewBox : false,
width: '100%',
height: '100%'
});

Ext.getCmp('drawing-panel').add(this.drawComponent);

var getClickFunction = function(imageCount) {
return function() {
alert(imageCount);
};
};

for ( var i = 0 ; i < 9 ; i ++ ) {
this.drawComponent.surface.add({
type: 'image',
src : '/content-images/' + (i+1) + '-front.jpg',
width: 200,
height: 200 * (187/139),
x: i*200,
y: 0,
listeners : {
click : getClickFunction(i+1)
},
}).show(true)
}

[gilescambray]

Right ok, I sorted this. Anyone with a similar problem merely has to set the scaling factor for each sprite. So, when compared with the code in the previous post:



this.drawComponent.surface.add({
type: 'image',
src : '/content-images/1-front.jpg',
width: 100
height: 100,
x: i*100,
y: 0,
}).setAttributes({
scale: {
x:1,
y:1
}
}, true);