最小高度不会缩放

Question

我想在所有IE浏览器中缩放图像。

我的代码：

<div class="outer"><img src="text.png" /></div>

CSS

.outer {
   position:absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   text-align: center;
}
img {
   min-height: 100%;
}

像这样，img-Tag使用宽度进行自动缩放。但这在IE中不起作用。图像只是垂直缩放。

有人能帮助我吗？

Answer 1

如果您希望图像宽度始终跨越整个浏览器窗口，则必须确保将body和父级容器（在本例中为outer）设置为{{1}这样宽度百分比可以为后代正常工作。然后，为width: 100%处的图像设置显式宽度，高度应自动缩放。

100%

jsfiddle

Answer 2

根据 msdn ，

  

如果未明确设置包含块的高度，则元素没有最小高度，min-height属性被解释为0％。

您需要明确提及父容器的高度。

body{height: 800px;}  /* set your own height here */

根据 Sitepoint

  

如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素未绝对定位，则百分比值将被视为零。