All geek questions in one place

Resize div and its contents to the size of the browser window

Is it possible to automatically resize a div and its contents when resizing a browser window? I want the text to not be wrapped. I want to adjust the image and font size to the same composition (or layout). can this be done with CSS? thanks martin

+4
source share
4 answers

I wanted to resize the image relative to the ratio of the parent div and window size. I used the code below. The problem is that the image width changes correctly, but the height is divided 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); } } }
0
source

CSS provides only limited (semi) events, however you can use width or orientation queries to apply different styles depending on the width of the window.

Thus, for some browsers you can use:

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

That will paint all the text red if the width of the window is less than its height.

More precisely, you can use width:

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

Codes will color the text red if the width of the window is less than 800 pixels. Try changing this page to see the effect.

To be more precise, javascript is required.

+3
source

You can use jquery's resize method. and you 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 you can add change font size or any image height or anything else ... and if you don't want to use jquery then you can check the link below, WINDOW SIZE

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

+1
source

I think the following solution is very useful for resizing objects all the time - 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/

0
source

Source: https://habr.com/ru/post/1308400/

More articles:


All Articles