Div Square, Width Size Based on 100% Height

Div Square, width size based on 100% height

Ok here the solution.

<div id="square" style="background-color:black;height:100%">test</div>

$(window).ready(updateWidth);
$(window).resize(updateWidth);

function updateWidth()
{
var square = $('#square');
var size = square.height();

square.css('width',size);
}

http://jsfiddle.net/j372H/7/

Square div with width based on percentage height

In CSS set the height of the div also

<style>

html,body,#square { height:100%; }

</style>

then the reverse for your js function

function updateWidth()
{
var square = $('#square');
var size = square.height();

square.css('width',size);
}

Demo courtesy of wared - jsfiddle.net/wared/spSLP - - nice one, wared

How to style a div to be a responsive square?

Works on almost all browsers.

You can try giving padding-bottom as a percentage.

<div style="height:0;width:20%;padding-bottom:20%;background-color:red">
<div>
Content goes here
</div>
</div>

The outer div is making a square and inner div contains the content. This solution worked for me many times.

Here's a jsfiddle

Css div responsive square dependent on height

Aspect ratio can be controlled by using the padding-bottom trick.

Note however that this technique means that you cannot have additional inline content inside the child div.

div.parent {  width: 80%;  background: #c0ffee;  margin: 25px auto;}.parent >div {  width: 49%;  padding-bottom: 49%;  background: #000;}

<div class="parent">  <div></div></div>

Make a div square when there is a dynamically changing width based on percentage

This is un-tested, I do not know of how to do this in CSS only, I would use jQuery.

$('div').height($('div').width());

CSS square based on height

You could use the new viewport size units

JSfiddle

CSS

html,body {
    height: 100%;
    margin: 0;
}
div {
    background: red;
    height: 100vh;
    max-width:100vh;
    box-sizing: border-box;
}

Support is effectively IE9 and up

How to make square div fit into parent div

Add a mediaquery to limit width and height of the element if you are looking at the viewport in landscape mode

@media all and (orientation: landscape) {
  div.stretchy-wrapper {
     width: calc(100vh - 20px);
     height: calc(100vh - 20px);
     padding-bottom: 0;
  }
}

In other words: if the width of the viewport is ≥ height, to ensure a 1:1 aspect ratio you could set the width equal to 100vh (minus some padding, if you need to) and the height should be equal to the width. Also the padding-bottom is no longer necessary when this condition occurres.

Jsfiddle fork

---

After your edit

Since your outercontainer is fixed in height, if the viewport width is ≥ 200px then set a fixed width and a fixed height both to 200px. otherwise use a psuedoelement to preserve the 1:1 aspect ratio:

    div.stretchy-wrapper::before {      display: block;      content: "";      padding-bottom: 100%;    }
    @media all and (min-width: 200px) {      div.stretchy-wrapper {        width: 200px;        height: 200px;      }      div.stretchy-wrapper::before {         display: none;      }    }            .outercontainer {      max-width: 400px;      height: 200px;      border: 1px #9cb dashed;    }        .stretchy-wrapper {      background: #9bc;    }

<div class="outercontainer">  <div class="stretchy-wrapper"></div></div>

---

Related Topics