창 패널 내 이미지보기

Question

이미지가 표시 될 고정 너비와 높이 (예 : 500, 400)의 창 패널이 있습니다. 이미지의 너비/높이는 200/700입니다. 부모 컨테이너보다 너비가 좁 으면 너비를 위반하지 않고 창 안의 이미지를 설정해야합니다. 그러나 문제는 이미지의 높이에 관한 것입니다. 이미지의 하단 부분이 잘립니다. 나는 레이아웃을 사용했다. 그러나 이미지는 이미지의 원래 너비를 위반하는 윈도우의 전체 너비/높이를 포함합니다.

어떤 도움이 appreciatedd 될 것이다

... 여기

코드입니다 ...

Ext.onReady (함수() { 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(); 

}); 이미지에

Answer 1

주고 CSS의 다음 CSS를 사용하려고

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

사용 레이아웃을 해달라고 :