最小高度不缩放

Question

I want to scale a image in all IE Browsers.

My Code:

<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%;
}

Like this the img-Tag makes a autoscale with the width. But that doesn't work in IE. The Image just scale vertical.

Can anybody help me ?

Answer 1

If you want the image width to always span the entirety of the browser window, you have to ensure you set the body and parenting containers (in this case outer ) to have width: 100% so that width percentages work correctly for descendants. Then, set an explicit width to the image at 100% and the height should scale automatically.

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

jsfiddle

Answer 2

According to msdn ,

If the height of the containing block is not explicitly set, then the element has no minimum height and the min-height property is interpreted as 0%.

You need to mention height to the parent container explicitly.

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

According to Sitepoint

If the height of the containing block is not specified explicitly (that is, it depends on content height), and this element is not absolutely positioned, the percentage value is treated as zero.