CODEWITHSUNDEEP
javascripthtmlheightcss
Sean Connolly
Sean Connolly

Reputation: 5802

css - 100% height with pixel min-height

My goal is to create a container which occupies 100% of the window height and, within it, have an image which is also 100% of the window height. However, I'd also like to set a minimum height on the container so things don't get too small.
For example:

<html>
    <body style="height: 100%;">
        <div style="height: 100%; min-height: 500px;">
            <img src="cool.jpg" style="height: 100%"/>
        </div>
    </body>
</body>

(I swear my webpage is cooler than this)

Ok, everything works great. Until we shrink the window such that min-height kicks in. At that point the div stops shrinking, as expected, but the img continues to shrink with the window.

Any thoughts?
A pure CSS implementation would be ideal but I'm open to JS if need be.

Upvotes: 0

Views: 3033

Answers (4)

micp
micp

Reputation: 93

Is this what you're after?

http://jsfiddle.net/xDczp/5/

.container {height:100%; width:100%;}
.content {height: 100%;}
.content img {height:100%; min-height: 500px; width:100%;}

The image height shouldn't drop below 500px.

Upvotes: 0

Zubair1
Zubair1

Reputation: 2780

Try this: http://jsfiddle.net/NpqCW/3/

Using my answer on the below question as a reference if you need more detail and example. https://stackoverflow.com/a/10582476/339367

Basically, what you were missing was the height:100% on the root tag which is <html>. All parents must have this set for it to work, you were doing it on all except the root element which is <html>.

UPDATE:

http://jsfiddle.net/jDk3s/

Added min-height:inherit on the image to make it work on chrome. It could also have been fixed by removing the min-height on parent div of IMG (but not sure if you really really need that or not).. so you could chose one or the other way.

Upvotes: 0

Todd
Todd

Reputation: 5454

id just set the div background to the target img, then restrict the height on resize through jquery.

<html>
<head>
<style>
div#cont {
background: url(path/to/cool.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-etc-vend-pref-background-size: cover;

}
</style>
</head>
<body style="height: 100%;">

  <div id="cont" style="height: 100%; min-height: 500px;">
    <img id="bg" src="cool.jpg" style="height: 100%"/>
  </div>


<script>
  $(window).load(function(){
  $(window).resize(function(){
   var  win = $(window),
       cont = $('div.cont'),
        min = 500;

    if (win.height() <= min){
      cont.height(min);
    } else {
      cont.height(win.height());
    }

 });

});
</script>
</body>

Upvotes: 0

Linus Caldwell
Linus Caldwell

Reputation: 11058

How about giving the image the min-height instead of the container?

Upvotes: 5

Related Questions