Div with 100% height and width regardless of content

**molendijk** · 08-15-2014, 01:06 PM

You could use a mix of css and js:

Code:

<!doctype html>
<html >
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>&nbsp;</title>


<body style="overflow-x: hidden; font-family: verdana; font-size: 14px">

<div id="picture" style="position: absolute; left: 0; top: 0; background: url(http://www.lempens-design.com/IMG/jpg/france-main-picture.jpg) center no-repeat ; background-size: cover; z-index: -1; "></div>



<div style="position: absolute; left: 0; top: 50%; width: 100%; text-align: center; ">
<span style="position: relative; background: transparent; color: white; padding: 10px; margin: auto; font-family: lucida handwriting; font-size: 50px">B I E N V E N U E</span>
</div>


<div style="position: absolute; top: 100%; width: 95%; text-align: center; ">
<h1>De Paris à Luxembourg</h1>
Né à Paris le 14 février 1977, cela fait maintenant <b>plus de 10</b> ans que je vis de ma passion, le webdesign.<br>
FrickenTrevor, I wouldn't trust this person if I were you.<br>
Right on the first page he makes a rather stupid spelling mistake: je <b>vie</b> de ma passion should be je <b>vis</b> de ma passion.<br>
Doesn't look very professionnel.
</div>



<script>
function resize_it()
{
document.getElementById('picture').style.width=window.innerWidth+'px';
document.getElementById('picture').style.height=window.innerHeight+'px';

}
//resize_it();
window.onload=onresize=resize_it;
</script>

</body>

</html>

**Beverleyh** · 08-15-2014, 02:08 PM

I am absolutely astounded that anyone would put a 11.5MB web page online!!!

**FrickenTrevor** · 08-15-2014, 09:40 PM

Originally Posted by molendijk

You could use a mix of css and js [...]

How can the aspect ratio be kept with your JS? The height stays the same when the page is resized however the width of the image is not kept. I tried this, but it didnt keep the aspect ratio

Code:

jQuery.fn.resizeHeightMaintainRatio = function(newHeight){
    var aspectRatio = $(this).data('aspectRatio');
    if (aspectRatio == undefined) {
        aspectRatio = $(this).width() / $(this).height();
        $(this).data('aspectRatio', aspectRatio);
    }
    $(this).height(newHeight); 
    $(this).width(parseInt(newHeight * aspectRatio));
}

**molendijk** · 08-15-2014, 10:03 PM

That's strange. It's OK on my machine. The only thing is that a small portion of the image becomes invisible when the window gets very small.
Did you take a look at Beverleyh's 3 Ways to Resize/Scale Web Images in Responsive Design?

**FrickenTrevor** · 08-15-2014, 10:15 PM

Originally Posted by molendijk

a small portion of the image becomes invisible when the window gets very small.

Thats what I was talking about

**molendijk** · 08-15-2014, 10:57 PM

No, you were talking about the ratio of the width of the image to its height (which is something quite different). That's no problem in my code. I'll try to correct the issue of the image being cut off in small windows as soon as I've got some time. But have you looked at Beverleyh's code?

**FrickenTrevor** · 08-15-2014, 11:19 PM

Yeah I have, it seems like a script would be easier than using calculations. Its a great post though and very helpful

**FrickenTrevor** · 08-18-2014, 08:26 PM

Originally Posted by molendijk

I'll try to correct the issue of the image being cut off in small windows as soon as I've got some time

Any luck with trying to correct it?

**molendijk** · 08-18-2014, 08:51 PM

Sorry, no luck yet. I've got too little time at the moment.

**molendijk** · 08-19-2014, 11:18 AM

Frickentrevor, I don't think what you want is possible. If we want to maintain the width-height ratio, there will always be some part of the image being cut off in smaller windows.
And that's precisely what also happens in the site you mentioned.