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属性并将其值设置为start（根据http://msdn.microsoft.com/en-us的默认值/library/windows/apps/xaml/hh466348.aspx）图像显示为全尺寸。

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

ps：我在MSDN Metro Style 应用程序上问了同样的问题，但完全没有答案

4

1 回答 1

2

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

这实际上不是一个错误。您看到的行为是因为在确定图像的基于百分比的最大高度时，尚未定义父级（网格项）的高度。结果是它被视为“最大高度：自动”，这导致了大图像。

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

您可以在不使用 Grid 的情况下看到相同的行为：

<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 回答