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>

这显示图像重新调整大小以保持其方面（我期望的），但是，如果您取消注释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

首先：初始值是“拉伸”而不是“开始”;这是一个doc bug。将其设置为“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 Grid实现的团队。

-ms-grid-row-align属性中可能存在错误

1 个答案: