0

画像が44pxよりも高い次のコードがあります。

<div style="width:300px;display:-ms-grid;-ms-grid-rows:44px 44px">
    <div style="-ms-grid-row:1; -ms-grid-column:1;/*-ms-grid-row-align: start;*/">
        <img style="max-width:100%;max-height:100%" src="/picture000.png"/> </div>
    <div style="-ms-grid-row:2; -ms-grid-column:1">hola mundo</div>
</div>

これは、画像のサイズがdivに合わせて変更され、そのアスペクト（私が期待するもの）を維持していることを示していますが、ms-grid-row-alignプロパティのコメントを解除し、その値を（ http://msdn.microsoft.com/en-usstartによるデフォルト値）に設定すると、/library/windows/apps/xaml/hh466348.aspx）画像はフルサイズで表示されます。

それはバグですか、それとも私が知らない別のプロパティでそのプロパティを使用する必要がありますか？

ps： MSDNメトロスタイルアプリで同じ質問をしましたが、まったく答えがありませんでした

4

1 に答える 1

2

まず第一に、初期値は「開始」ではなく「ストレッチ」です。これはドキュメントのバグです。「start」に設定すると、実際には「stretch」から値が変更されます。

これは実際にはバグではありません。表示されている動作は、画像のパーセンテージベースの最大高さが決定されているときに、親（グリッドアイテム）の高さがまだ定義されていないためです。その結果、「max-height：auto」として扱われ、大きな画像になります。

これは、グリッドアイテムの-ms-grid-row-align値が「stretch」に設定されているときに画像が小さくなる理由も説明しています。「ストレッチ」に設定すると、グリッドアイテムの高さが行の高さ（この場合は44px）に設定され、画像のパーセンテージベースの最大高さをその値に対して解決できます。

グリッドを使用しなくても同じ動作を確認できます。

<div style="max-height:100px;"><img id="img" style="max-height:100%" src="/picture000.png"/></div>

あなたの説明はあなたがやろうとしている理由を完全には説明していませんが、画像自体をグリッドアイテムにして、グリッド行自体に対してそのパーセンテージの最大高さの値を解決できるようにすることを検討することをお勧めします。「-ms-grid-column-align：start」も追加して、伸びたり不均衡になったりしないようにする必要があることに注意してください。

<div style="width:300px;display:-ms-grid;-ms-grid-rows:44px 44px">
    <img style="max-width:100%;max-height:100%;-ms-grid-row:1;-ms-grid-column:1;-ms-grid-row-align: start;-ms-grid-column-align: start;" src="/picture000.png"/>
    <div style="-ms-grid-row:2; -ms-grid-column:1">hola mundo</div>
</div>

開示：私は、MicrosoftによるCSSグリッドの実装に取り​​組んだチームに所属しています。

于 2012-08-16T23:16:22.070 に答える