CODEWITHSUNDEEP
imageextjs4aspect-ratio
user1722857
user1722857

Reputation: 867

How to maintain and apply aspect ratio of images in extjs4

I am working in extjs4. I am trying to display image by using following component=

xtype : 'image',
height : 600,
width : 800,
src :me.imageSrc

Where,me.imageSrc is having image path. But sometimes image is shown as blurred or expanded if image's height and width is too large. So how to calculate aspect ratio and apply it in extjs4 in order to show images properly.

Upvotes: 0

Views: 837

Answers (1)

Crysfel
Crysfel

Reputation: 8158

In order to get the size of the loaded image you need to listen the "load" event on the image element, in the listener callback you have access to the with and height.

Here's the code that makes the magic:

var img = imageCmp.imgEl
img.on('load',function(){
     Ext.Msg.alert('IMG Size',img.getWidth()+'x'+img.getHeight());
});

Here's a working example:

http://jsfiddle.net/crysfel/utUA2/

Make sure you remove the hardcoded width and height ;)

Upvotes: 2

Related Questions