0

I keep finding almost solutions to something that I feel should be really simple, but can't figure it out. (note - i'm at a really rudimentary stage of learning CSS right now)

I have one image to put on a page. Center horizontal/vertical. In a div container that is 80% of the window height and width. I would like the image to stretch to fill either the height or the width of that div, based on whichever is smallest.

I'm sure this is simple for most, but again, I'm just learning. Any direction on this would be wonderful.

I created an illustration in case i'm not explaining well enough: enter image description here

totymedli
  • 29,531
  • 22
  • 131
  • 165
user2375438
  • 1
  • 1

1 Answers1

1

Try this http://jsfiddle.net/David_Knowles/ddh2k/

This does most of what you want. You'll need to add some extra javascript if you really only want the image to be 80% of the available height when the screen height is reduced to less than the image intrinsic height.

<body>
<div id="container">
        <img src="http://dummyimage.com/600x400/000/fff.jpg" alt="apropriate alt text">
</div>
</body>

html,
body{
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    background-color: #eee;
}
#container{
    margin: auto;
    width:100%;
    height:100%;
    text-align:center;
    font-size:0;
    white-space:nowrap;
    background:#aae;
}
#container:before{
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
img {
    width:80%;
    height:auto;
    display:inline-block;
    vertical-align:middle;
    background:#fff;
}
Timidfriendly
  • 3,224
  • 4
  • 27
  • 36
  • this is similar to what i'd already been trying, with no luck in getting the image to center vertically. i tinkered with what you offered, and still get pretty much the same result. the page i've been testing on is at http://modnpop.com/test/ – user2375438 May 12 '13 at 21:03