CODEWITHSUNDEEP
jqueryhtmlresizewindow
Hans de Vries
Hans de Vries

Reputation: 119

Divs auto resize on window width and height

I am working on a project and I am trying to create the following:

I want to have three or more divs below eachother (with content and background image). When you open the browser, all these divs have to resize automatic to the browser size (width and height). When you resize the browser window (without refreshing), the divs have to be as big as they were (so they should not resize with the window). After you make the browser screen smaller and you refresh, the divs should adjust to the new window size. (there should be a minimum width of 1024 so the divs cannot get smaller than that)

Inside the divs I want to add background image. (photo's). My goal is to resize the photo's exacly as the div size. So the height has to be scaled with the width of the photo/div.

For example: if the browser window is 1024x768, the div and photo have to be 1024x768. When I resize the browser, the div stays 1024x768. When you resize your browser as 1280x720 and refresh, the divs should automaticly adjust to that size. The height of the div should always be in scale with the width.

Does anyone know how to make this? I cannot find it anywhere else.

Upvotes: 1

Views: 3364

Answers (2)

Harshal Gajjar
Harshal Gajjar

Reputation: 265

<html><head>
<script src="js.js"></script>
<title></title>
<style>
#box {
      background: url("DSC_2598.jpg");
background-size:contain;
      position: absolute;
    }
</style>
</head>

<body>
<div id="box"></div>

<script>
        $(document).ready(function(){   
    var x=$(window).width();
        var y=$(window).height();

    if (x>1024) {var a=x/2;} else {var a=1024};
    if (y>768) {var b=y/2;} else {var b=768};
        $("#ww").html("width="+x +"<br>");
    $("#wh").text("height="+y);
        $("#box").css("height",b);
        $("#box").css("width",a); }); 

</script>
</head>
<body>
<br>
</body>
</html>

This may satisfy your need, provided you have an image that suits the ratio (1024x768).

Upvotes: 0

biziclop
biziclop

Reputation: 14596

http://jsfiddle.net/MQkmk/1/

$(function(){               // when the page is loaded ...
    var $f = $('#fixy');    // .. make current size permanent. 
    $f.css({
        width:  $f.width(),
        height: $f.height()
    });
});

Upvotes: 2

Related Questions