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

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

演示小提琴

这是你想要达到的目标吗？

.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;而不设置宽度。但这可能会在参考文档其余部分的内联流程时搞砸。