【问题标题】：How to make the containers dimension stretch to a childs dimension which is scaled proportionally如何使容器尺寸拉伸到按比例缩放的子尺寸
【发布时间】：2013-03-18 12:28:42
【问题描述】：

也许标题有点混乱，所以让我解释一下。

我有一个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/

【问题讨论】：

您是否尝试过从页面中删除任何视口元数据？然后将 div 容器的宽度和高度设置为原始图像的精确像素？
我正在使用 Sencha Touch，因此无法调整视口元标记。也不将容器的高度设置为实际像素，因为我希望图像能够流畅地适应不同的视口高度。
如果你将 html 中的 body 宽度设置为小于你正在玩的元素的大小，会怎么样？
恐怕解决方案必须仅限于设置容器和图像的样式，以避免与 Sencha Touch 框架的其他组件混淆。

标签： css sencha-touch-2 positioning

【解决方案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'

【讨论】：

【解决方案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;
    }

【讨论】：

谢谢，但我需要图像垂直填充屏幕（拉伸到视口高度），因此容器和图像的样式都必须设置为高度设置为 100%。

【解决方案3】：

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

【讨论】：

感谢您的建议，可惜没有达到预期的效果。