How to make the containers dimension stretch to a childs dimension which is scaled proportionally

Question

Maybe the title is confusing, so let me explain.

I have a DIV container scaled to a certain height with height: x and inside the container I have a IMG styled with height: 100%. Then, the width of the container only stretches to the width of the viewport. The effect I'm trying to achieve is to have the width of the containers match the width of the child element (the image, which is wider than the viewport).

I need this behaviour for a Sencha Touch application where I have a scrolling panel with an image inside it, which needs to stretch to the entire available viewport height (so the container is set to height: 100%), but currently, the panel doesn't scroll horizontally because the width of the container only stretches to the width of the viewport, while the image is wider.

Browser:

Code:

div {
    /* make container stretch to width of child */
    position: absolute;
    height: 100%;
    width: auto;
}    

img {
    height: 100%;
    width: auto;
}

Example: http://jsfiddle.net/hongaar/kBCtP/

Question: What do I need to do to make the container stretch and have to same width as the containing image?

---

EDIT: I've made a new fiddle with the actual problem I'm running into, using Sencha Touch 2: http://jsfiddle.net/hongaar/VPNE7/

Answer 1

Are you looking for something like this : http://jsfiddle.net/QCHDF/5/

Ext.application({
launch: function () {
    Ext.Viewport.add({
        xtype: 'panel',
        layout : 'hbox',
        //width: '100%',
        height: Ext.Viewport.getWindowHeight(),
        scrollable  : {
            direction       : 'horizontal',
            directionLock   : true
        },
        items : [{
            xtype : 'image',
            mode : 'img',
            src   : 'http://placehold.it/400x100',
            height: Ext.Viewport.getWindowHeight(),
            width : 400
        }, {
            xtype : 'image',
            mode : 'img',
            src   : 'http://placehold.it/400x100',
            height: Ext.Viewport.getWindowHeight(),
            //width : 400
        }]
    });
}
});

Key here is to use mode : 'img'