CODEWITHSUNDEEP
javascriptjqueryhtmlcss
David Mckee
David Mckee

Reputation: 1180

How can one find the "maximized" height of a browser window?

I am trying to make a picture take up 70% of the user's screen. However, if the screen is made smaller when the page is loaded or if the person has inspect element open, the picture becomes small and stretched. I believe the best solution would be to find the maximum height of the browser window and make the image that size. However, I am not sure how to do that?

Here is my current code for image sizing:

var topoffset = window.innerHeight * 0.77;
var profilestart = topoffset - $(".prof-header").height();
$('.splashPic').css("height", topoffset);
$('.splashPlaceholder').css("top", profilestart);

I also want to make it so that if someone is using a huge monitor (i.e. large Mac), the image size maxes out at that point? Any suggestions would be very helpful!

Edit: I don't want to make the image resize dynamically. Only load once.

Upvotes: 1

Views: 1063

Answers (3)

user3123649
user3123649

Reputation: 148

Use window.screen.availHeight instead of window.innerHeight

or screen.height

var x = screen.height*0.7;

EDIT: Here's more code to show that it works for what you asked. Gets the height upon load and doesn't resize.

<img id="img2" src="http://lorempixel.com/320/240/food" />

<script>
$(document).ready(function () {
    var x = screen.height*0.7;
    $('#img2').css("height",x);
}
</script>

Upvotes: 3

Danield
Danield

Reputation: 125641

If you want the image to take up 70% of the viewport height (and obviously retain its ratio) you could use the new css unit vh (viewport height) like this:

img
{
    height: 70vh;
}

FIDDLE

Upvotes: 0

Andrew
Andrew

Reputation: 20111

It sounds like what you want to do is something like this:

img{
    display:block;
    width:70%;
    min-width:320px;
    max-width:1200px;
}

Upvotes: 0

Related Questions