最小高度不能缩放

我想缩放所有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-标签使得与宽度的自动缩放。但是这在IE中不起作用。该图像只是垂直缩放。

任何人都可以帮助我吗？

来源

2013-02-21 zoom23

您无法使用这两个元素的百分比值。 – TNK 2013-02-21 08:27:15

您定位的是哪个版本的IE？你想要什么样的实际结果？为了使图像缩放高度，相对于浏览器的宽度？意思是图像始终宽度为100％？ – 2013-02-21 08:28:36

您只给予最小高度：100％;那么它必须缩放垂直...试试min-width-100％; – ravisoni 2013-02-21 08:32:36

如果你想在图像的宽度总是跨越浏览器窗口的全部，你必须确保你设置body和养育子女的容器（在这种情况下outer）有width: 100%使宽度百分比正常工作的后裔。然后，在100%处为图像设置一个明确的宽度，高度应该自动缩放。

body, .outer { 
    width: 100%; 
} 
img { 
    width: 100%; 
}

jsfiddle

来源

2013-02-21 08:35:42

根据msdn，

如果包含块的高度没有显式地设置，则该元件不具有最小高度和最小高度属性解释为0％。

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

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

根据Sitepoint

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

来源

2013-02-21 08:56:12

好的，如果我有一个外部div围绕outher，它是一样的？ – zoom23 2013-02-21 08:59:30

@ zoom23请通过提供的msdn链接。这清楚地解释了IE浏览器的完整行为。 – 2013-02-21 09:01:45

@ zoom23以像素为单位提及身高。它会工作。 – 2013-02-21 09:19:55

最小高度不能缩放

回答

相关问题