如何使容器尺寸拉伸到按比例缩放的子尺寸

Question

也许标题令人困惑，所以让我解释一下。

我有DIV容器使用height: x缩放到某个高度，并且在容器内我有IMG样式与height: 100%。然后，容器的宽度仅延伸到视口的宽度。我想要实现的效果是让容器的宽度与子元素的宽度匹配（图像，它比视口宽）。

我在Sencha Touch应用程序中需要这种行为，其中我有一个滚动面板，里面有一个图像，需要拉伸到整个可用的视口高度（所以容器设置为height: 100%），但是目前，面板不会水平滚动，因为容器的宽度只会延伸到视口的宽度，而图像则更宽。

浏览器：

代码：

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

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

示例： http://jsfiddle.net/hongaar/kBCtP/

问题： 我需要做什么才能使容器伸展并且与包含图像的宽度相同？

---

修改 使用Sencha Touch 2，我对我遇到的实际问题做了一个新的小提示：http://jsfiddle.net/hongaar/VPNE7/

Answer 1

您是否在寻找类似的内容：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
        }]
    });
}
});

此处的关键是使用mode : 'img'

Answer 2

DEMO FIDDLE

这是你想要实现的目标吗？

.container {
        /* make container stretch to width of child */
        position: absolute;
        width: auto;
        height: auto;

        /* for debugging */
        padding: 2px;
        border: 1px solid black;
    }

    .c1 { top: 0; }
    .c2 { top: 220px; }


    .picture1 {
        height: auto;
        width: auto;
    }

    .picture2 {
        /* but I can't set absolute height, need to be proportionally */
        height: 200px;
        width: auto;
    }

Answer 3

您可以尝试将父级设置为display: table;而不设置宽度。但是，这可能会在参考文档其余部分的内联流程时搞砸了。