resize div and its content on browser window resiz

Question

is it possible to automatically resize div and its content when browser window is resized? i want text not to wrap. i want to adjust image and font size to have the same composition (or layout). is it possible to do it using CSS? thanks Martin

Answer 1

I have wanted to change image size relatively to ratio of parent div and window size. I have used code posted below. The problem is, the image width is resize correctly but height is devided by 13 instead of 3.9 in my case. can you see the error? thanks

    var height = window.innerHeight;
    var width = window.innerWidth;

    var pic = document.getElementById('picture');
    var snimek = pic.childNodes[0];

    var heightRatio = snimek.clientHeight / height;
    var widthRatio = snimek.clientWidth / width;

    console.log(widthRatio +' x '+heightRatio);

    for(i = 0; i < snimek.childNodes.length; i ++)
    {
        if(snimek.childNodes[i].tagName == 'IMG') {

            if(widthRatio > 1 || heightRatio > 1) {
                console.log(snimek.childNodes[i].width + 'x' + snimek.childNodes[i].height);
                if(widthRatio > heightRatio)
                {
                    snimek.childNodes[i].width /= widthRatio;
                    snimek.childNodes[i].height /= widthRatio;
                }
                else
                {
                    snimek.childNodes[i].width /= heightRatio;
                    snimek.childNodes[i].height /= heightRatio;
                }
                console.log(snimek.childNodes[i].width + 'x' + snimek.childNodes[i].height);
            }
        }
    }

Answer 2

CSS provides only limited (semi-)events, however, you may be able to use the width or orientation media queries to apply different styles based on the width of the window.

Thus, for some browsers, you can use:

@media all and (orientation:portrait) {
    body { color: red; }
}

Which will paint all the text red when the window width is less than its height.

More accurately, you can use width:

@media all and (max-width:800px) {
    body { color: red; }
}

Which will paint the text red when the window is less than 800px wide. Try resizing this page to see the effect.

To be more precise requires javascript.

Answer 3

I think the following solution is very useful for resizing objects constantly - this is just one example:

CSS:

.scale
{
    font-size: calc(1vw + 1vh);
    width: calc(10vw + 10vh);
    height: calc(5vw + 5vh);
    padding: calc(1vw + 1vh);
    background-color: yellow;
}

HTML:

<div class="scale">
Resize container to resize me!
</div>

FIDDLE: https://jsfiddle.net/uxj77rg1/

Answer 4

You can use the jquery's resize method. and u can put something like this...

$(window).resize(function() {
     if($(window).width() == 800)  // u can choose the size of the window also.
            $("any particular div").css("font-size":"14px");
});

so u can add change font size or any image height or anything... and if u don't want to use jquery then u can check out the link below, WINDOW SIZE

but from my point of view u should use Jquery......