I am not sure if this can be done, but is it possible in ExtJS, in an Ext.Img ponent to keep the image from stretching to the size of the ponent and instead have it keep its proportions? To keep it from looking stretched?

Let me try to clarify this a bit from researching this, if in HTML I do something like this

<img src=# />

The image is not altered and is just the size I need it to be, if in ExtJs I do something like this

    xtype:'image',
    id: 'south_image',
    src: '#',
    region: 'south',
    width: 700,
    height: 200

Then the image turns out to be stretched, is there a way, assuming that Ext.Img is larger than the image, how do I get the image to keep its natural size like in HTML?

I am not sure if this can be done, but is it possible in ExtJS, in an Ext.Img ponent to keep the image from stretching to the size of the ponent and instead have it keep its proportions? To keep it from looking stretched?

Let me try to clarify this a bit from researching this, if in HTML I do something like this

<img src=# />

The image is not altered and is just the size I need it to be, if in ExtJs I do something like this

    xtype:'image',
    id: 'south_image',
    src: '#',
    region: 'south',
    width: 700,
    height: 200

Then the image turns out to be stretched, is there a way, assuming that Ext.Img is larger than the image, how do I get the image to keep its natural size like in HTML?

• javascript
• html
• image
• extjs
• extjs4

• did you create image without specifying height and width? – Avinash T. Commented Jan 4, 2013 at 6:40
• The image can be uploaded by the user, I shrink it a little so it doesn't take too much space in the database. As I mentioned above, using the HTML <img> tag without specifying width or height works fine. – Art F Commented Jan 4, 2013 at 15:52

2 Answers 2

So I was able to find the answer, I had to put the Ext.Img inside of an Ext.container.Container, the size would be specified inside the container, while the size of the Ext.Img would be left blank:

    xtype: 'container',
    region: 'south',
    width: 700,
    height: 200,
    autoScroll: true,
    items: [{
        xtype:'image',
        id: 'south_image',
        src: '#',
        region: 'south',
        autoScroll: true
    }]

Yes.. Set the maxHeight and maxWidth of the Ext.Img

Doc here