0

タイトルがわかりにくいかもしれませんので、説明させてください。

でスタイリングしたコンテナとその内部でDIV、特定の高さにスケーリングされたコンテナがあります。次に、コンテナの幅はビューポートの幅までしか伸びません。私が達成しようとしている効果は、コンテナの幅を子要素の幅（ビューポートよりも広い画像）と一致させることです。height: xIMGheight: 100%

この動作は、画像が内部にあるスクロールパネルがあり、使用可能なビューポートの高さ全体に拡大する必要がある（つまり、コンテナがに設定されているheight: 100%）Sencha Touchアプリケーションで必要ですが、現在、パネルは水平方向にスクロールしませんコンテナの幅はビューポートの幅までしか伸びないのに対し、画像はより広いためです。

ブラウザ：

jsfiddle.netからのブラウザビュー

コード：

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/

4

3 に答える 3

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'

于 2013-03-19T05:49:43.610 に答える
0

display: table;幅を設定せずに、親を設定してみてください。しかし、これは残りのドキュメントのインラインフローを参照してそれを台無しにする可能性があります。

于 2013-03-18T17:28:46.687 に答える
0

デモフィドル

これはあなたが達成しようとしていることですか？

.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;
    }
于 2013-03-18T12:46:53.653 に答える