CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapresponsive-design
Insane Fragger
Insane Fragger

Reputation: 63

How do I resize a image according to view Port Size with Jquery/javascript

    I have 3 divs

One is a jumbotron.Second is another div which has accordions. Third is a fixed footer.I want this to get the height according to screen height.Footer heightis 75px.2 accordions height is 100px.The image is a PNG.

    <--CODE-->

<body>

//This is the First Div which has the IMAGE 

           <div class="container push-spaces">
                <div class="row">
                    <div class="col-xs-12">
                        <img>
                    </div>
                </div>
            </div>
        </div>

    <--2ND DIV PANELS Accordions-->

        <div class="panel-group" id="accordion">
        <div class="panel panel-default" id="panel1">
            <div class="panel-heading">
                 <h4 class="panel-title">
            <a data-toggle="collapse" data-target="#collapseOne" 
               href="#collapseOne">
              Collapsible Group Item #1
            </a>
            </div>
            <div id="collapseOne" class="panel-collapse collapse">
                <div class="panel-body"></div>
            </div>
        </div>
        <div class="panel panel-default" id="panel2">
            <div class="panel-heading">
                 <h4 class="panel-title">
            <a data-toggle="collapse" data-target="#collapseTwo" 
               href="#collapseTwo" class="collapsed">
              Collapsible Group Item #2
            </a>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body"></div>
            </div>
        </div>
    </div>

 <--FOOTER-->
    <div class="navbar navbar-default navbar-fixed-bottom visible-xs ">
            <div class="container text-center">
                <p class="navbar-btn btn  btn-success text-center">BLALALLALAL</p>
            </div>
        </div>


</body>

Upvotes: 3

Views: 48

Answers (1)

Garconis
Garconis

Reputation: 784

You could use CSS3 calc, depending on your browser support.

height: calc(100vh - 175px);

Upvotes: 2

Related Questions