Question

I want a <div> that reacts and fits the screen window size. The <div> is supposed to have the dimensions 2:3 So that the height is 3:3 and the width is 2:3. It is easy enough to make it in css by writing width: 200px; and height:300px;.

The thing is that I want the height of the <div> to resize depending on the screensize. And also I want the text inside of it to resize. I know it is possible by javascript or jQuery, but I really don’t know how. Something like taking the height and split it in three, and then times two, and then make .css({'width',newWidth});

And it should be about the same thing with the text inside of it.

I found the correct way to do it. I had to change a little bit, but it works now.

$(window).resize(function() {
var ratio = 0.6;
$('#hovsa').width($(window).height() * ratio).height($(window).height());
// instead of directly using "$(window).width() * ratio", you can call a method to
// calculate width and height each time window is resized.
})

I have changed the width to be height * ratio and it worked very well. The only thing I need to do now is to make the fontsize going the same way as well.

Answer 1

As said before, it is better for you to use percent values if the size you want will always be the same.

But, in other cases, if you need a fixed size for your div, or a calculated one, you can listen for window resizing event and do your css modification :

$(window).resize(function() {
    var ratio = 0.8;
    $('#divId').width($(window).width() * ratio).height($(window).height() * ratio);
    // instead of directly using "$(window).width() * ratio", you can call a method to
    // calculate width and height each time window is resized.
})