css - -ms-grid-row-align 属性中的可能错误

Question

我有以下代码，其中图像高于 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 属性并将其值设置为 start(根据 http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh466348.aspx 的默认值)图像以全尺寸显示。

这是一个错误还是我应该将该属性与另一个我不知道的属性一起使用？

p.s: 我在 MSDN Metro Style apps 上问过同样的问题完全没有答案

Answer 1

首先:初始值为“stretch”而不是“start”；那是一个文档错误。将其设置为“开始”实际上是在更改“拉伸(stretch)”的值。

这实际上不是错误。您看到的行为是因为在确定图像基于百分比的最大高度时，尚未定义父项(网格项)的高度。结果是它被视为“max-height: auto”，这导致了大图像。

这也解释了为什么当网格项的 -ms-grid-row-align 值设置为“stretch”时，您会得到较小的图像。当设置为“拉伸(stretch)”时，网格项的高度设置为行的高度(在本例中为 44 像素)，并且图像的基于百分比的最大高度可以根据该值进行解析。

您可以在不使用网格的情况下看到相同的行为:

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

虽然您的描述没有完全解释您尝试这样做的原因，但您可能需要考虑将图像本身设为网格项，这将允许其最大高度百分比值根据网格行本身进行解析。请注意，您还需要添加“-ms-grid-column-align: start”以确保它不会拉伸(stretch)并变得不成比例:

<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 网格实现。