Img PNG vs JPEG, IE vs. FF

[CI-CUBE]

Hi...

I want to display images of unknown size in an Img object. Here's the code:

Img tImage = new Img(<some url>);
tImage.setWidth100();
tImage.setHeight100();
tImage.setImageType(ImageStyle.CENTER);

JPEGs work fine on both IE (8) and FF (3.5). PNGs only work on FF, on IE they're scaled down to 16x16 I'd say...

If the URL is passed directly to the browser the image is rendered correctly in any constellation.

Any comments on this? TIA Ekki


* GWT Rocks! * SmartGWT Rocks Even Harder! * SmartGWT PRO 2.0,
GWT 2.0, Jetty 7.0.0, Eclipse 3.5.1, JRE 1.6.0_16 *
For Evaluation only: MySQL 5.1.41, Connector/J 5.1.10

*** www.EasternGraphics.com/X-4GPL ***

[Isomorphic]

This is due to the PNG workaround required for transparent PNGs in IE, which destroys our ability to get the "natural" size of the image.

Two workarounds:

1. Use .gifs instead if it's easier. They actually offer performance/memory use benefits in IE relative to PNGs.

2. use the GWT Image API to detect the natural size of the image, then set it explicitly on the SmartGWT Img instance.

[ccocco]

The problem seems to exist in IE whether you set the actual image width and height or not. The following code also renders a PNG as a 16x16 image:

    protected Canvas createHtmlPreviewCard()
    {
        Canvas canvas = new Canvas();
        canvas.setWidth100();
        canvas.setHeight100();
        canvas.setOverflow(Overflow.HIDDEN);
        canvas.setMargin(new Integer(5));  

        VLayout layout = new VLayout();
        layout.setWidth100();
        layout.setHeight100();
        layout.setOverflow(Overflow.AUTO);
        layout.setBorder("1px solid #A7ABB4");
        
        previewImg = new Img("htmlPreview.png", 692, 730);
        previewImg.setMargin(new Integer(0));
        previewImg.setPadding(new Integer(0));
        previewImg.setImageType(ImageStyle.NORMAL);

        layout.addMember(previewImg);
        canvas.addChild(layout);

        return (canvas);
    }

[Isomorphic]

Use ImageType "center".

[ccocco]

Same result except now the 16x16 image is centered in the panel.