Show image within window panel in extjs

Question

I have an window panel with fixed width and height(say 500, 400), in which an image will be shown.Image's width/height is 200/700. I have to set that image within the window without violating its width if it's width less than the parent container. But the problem is regarding image's height.The lower portion of the image gets truncated. I have used layout: fit. But image covers full width/height of window violating image's original width.

Any help would be appreciatedd...

here is the code...

Ext.onReady(function(){ var mapwin;

mapwin = Ext.create('Ext.window.Window', {
    title: 'Crop Window',
    width:500,
    height:400,
    border: false,
    x: 150,
    y: 60,
    items: 
    {
        xtype: 'image',
        width: 200,
        height: 400,
        src: 'path/to/any/image/200x700'
    }
});
mapwin.show();

});

Deepak Patil Deepak Patil · Accepted Answer · 2014-05-12T06:23:05

give css to your image, try using the following css

.image {
position: relative;
height: auto;
min-height: 100% !important;
}

dont use layout:fit

Show image within window panel in extjs

1 Answers