Question

How can I resize a box or a font-size on window resize? But the scaling but not exceed the default values set in the css, for instance, in css you might have width:800px; height:600px; for the box.

I want to archive the result similar to this website when you scale your browser, the images, boxes, font-sizes are being scaled too – http://davegamache.com/craftsmanship/

I tested my script but it seems very far from it,

html,

<div class="box">

    <p>I am in a box.</p>

</div>

css,

<style>
        .box {
            width:800px;
            height:600px;
            border:1px solid #000;
        }
    </style>

jquery,

$(document).ready(function(){

            var window_height = $(window).height();

            $(window).resize(function() {

                //$('.box').css({'height':(window_height/2)+'px'});

                $(".box").animate({
                    width: (window_height/2) +'px'
                }, 500 );

            });

        });

demo

I tried to use this plugin but can’t make it worked at all – http://fittextjs.com/

Any ideas?

Answer 1

You’ll need to get the window height inside the resize function, otherwise it will never change :

$(function(){
    $(window).on('resize', function() {
        var H = $(window).height();
        $('.box').animate({width: (H/2) +'px'}, 500 );
    });
});

An easier option would be to use percentages/em etc. in CSS, but for more advanced stuff JS is often needed.