PDA

View Full Version : [CLOSED] Display Image in ImagePanel centered and keep propotions



blueworld
Oct 09, 2013, 7:25 AM
Hi,

I have an ImagePanel inside a BorderLayout.

Currently, the Image is always stretched in width. I've already tried the ShrinkWrap property and I didnt have any luck yet.

I want to display the image centered and keep its propotions, so that there might be a white border left and right of it.

What am I missing here?




<ext:Panel ID="ImagePanelReturn"
runat="server"
Header="true"
Border="false" Flex="1" Frame="true" Split="true" Collapsed="true" Collapsible="true" CollapseDirection="Right" Region="east" Layout="FitLayout">
<Items>
<ext:Image ID="ImageReturn" runat="server">
<LoadMask ShowMask="true" Msg="Photo wird geladen"></LoadMask>
</ext:Image>
</Items>
</ext:Panel>

Daniil
Oct 09, 2013, 10:47 AM
Hi @blueworld,

Well, this stretches the image to fit all the available space.

Layout="FitLayout"

You could try to center an Image using a combination of VBox and HBox layouts.

Baidaly
Oct 09, 2013, 8:54 PM
Hello!

In some cases it's possible to center image using CSS rule:


margin: 0 auto;


<ext:Panel
runat="server"
Border="false">
<Items>
<ext:Image
StyleSpec="margin: 0 auto;"
ID="Image1"
runat="server"
ImageUrl="http://www.ext.net/wp-content/themes/ext/img/product/chart.jpg">
<Listeners>
<AfterRender Handler="this.setSize(this.getOriginalSize());"></AfterRender>
</Listeners>
</ext:Image>
</Items>
</ext:Panel>

However, you should understand that this solution is not native for Ext.NET and the use of HBox and VBox layouts can be more appropriate.