A Div With Auto Resize When Changing Window Width\Height

Resize div along with content inside according to window size

You can use the vw value to make divs that shrink proportionally with the window.

Example

HTML

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

CSS

.one {
width: 20vw;
height: 20vw;
background-color: #76ccde;
float: left;
margin-left: 10px;
}

.two {
width: 25vw;
height: 25vw;
background-color: #c976de;
float: left;
margin-left: 10px;
}

.three {
width: 30vw;
height: 30vw;
background-color: #a7de76;
float: left;
margin-left: 10px;
}

Resize div on resizing window

Based on suggestions from folks above, I am pasting the answer here for reference to others who would like to see a working solution!

.footer-box{ position: fixed; font-family: Arial, sans-serif; color: #FFFFFF; background-color: #000000; font-size: 11px; width: 100%; opacity: 0.8; z-index: 50; bottom: 0px; left: 0px;}.footer-box h2{ margin-top: 0; margin-bottom: 0; font-size: 20px; text-align: center; line-height: 30px; font-weight: normal; font-family: Arial, sans-serif; color: #A9A9A9;}.footer-box a{ text-decoration: none; outline: none; color: #A9A9A9;}.footer-box a:hover{ text-decoration: underline;}
<div class="footer-box"> <h2> <a href="/weddings/">Weddings</a> | <a href="/cityhall/">City Hall</a> | <a href="/engagements/">Engagements</a> | <a href="/barmitzvah/">Bar Mitzvah,Quinceanera</a> | <a href="/birthdays/">Birthdays</a> | <a href="/maternity/">Maternity</a> | <a href="/portraits/">Portraits</a> </h2>   </div>

How to make div element auto-resize maintaining aspect ratio?

The aspect-ratio ref property has a good support now so you can use the below:

body {
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background: gray;
}


.stage {
--r: 960 / 540;

aspect-ratio: var(--r);
width:min(90%, min(960px, 90vh*(var(--r))));

display: flex;
justify-content: center;
align-items: center;


background:
/* this gradient is a proof that the ratio is maintained since the angle is fixed */
linear-gradient(30deg,red 50%,transparent 50%),
chocolate;
}
<div class="stage">
<p>Some text</p>
</div>

Resizing Div vertically when view port is resized

Looks like a job for Flexbox:

 body {
height: 100vh;
padding: 0;
margin: 0;
}

.container {
height: 100%;
border: 1px solid #bbb;
}

.page-header {
display: block;
}

.content {
display: flex;
flex-direction: column;
height: 100%;
}

.wrapper {
width: 100%;
height: 100%;
overflow: auto;
}

.override {
border: 1px solid blue;
height: 100%;
overflow: auto;
}

.footer {
text-align: center;
height: 25px;
}

JSFiddle demo:https://jsfiddle.net/9yhsnaLk/2/

How to change height of DIV based on window size

  1. When you set a specific height on an image it will always stay that height regardless of browser resize

  2. When you set a specific height on a "container" or an element surrounding your image, your image will be constricted to that containers dimensions.(generally speaking)

You will need to remove your height: 400px if you wish for the image to resize.

Note: Your image will only 'grow' to its natural size. So if you have an image that is 200px high and 200px wide thats as big as it will get(without altering picture).

Also... If you must have at LEAST 400px height on your image - try using

image{
min-height: 400px;
}

This is basically just setting your image so that the very smallest height that it can be is 400px;

If you want your image to grow dynamically with browser resize there are several ways to accomplish that. Check out this tutorial
http://css-tricks.com/perfect-full-page-background-image/

div height according to window size with overflow-y: auto

Use vh to fix height according to screen size.

vh  Relative to 1% of the height of the viewport*

ref: https://www.w3schools.com/cssref/css_units.asp



Related Topics



Leave a reply



Submit