CODEWITHSUNDEEP
jqueryhtmlcssinternet-explorer
zoom23
zoom23

Reputation: 714

min-height doesn't scale

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 ?

Upvotes: 0

Views: 616

Answers (2)

Mr_Green
Mr_Green

Reputation: 41832

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.

Upvotes: 0

Ruben Infante
Ruben Infante

Reputation: 3135

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

Upvotes: 1

Related Questions