Height Equal to Dynamic Width (Css Fluid Layout)

Height equal to dynamic width (CSS fluid layout)

Using jQuery you can achieve this by doing

var cw = $('.child').width();
$('.child').css({'height':cw+'px'});

Check working example at http://jsfiddle.net/n6DAu/1/

Height equal to dynamic width (CSS fluid layout) + Expand to contain overflow

Move border to your inner element and then add 100% width and 100% min-height, like this:

.shape_inner {
    border: 1px solid #111;
    padding: 20px;
    min-height: 100%;
    width: 100%;
}

Check it out: http://jsfiddle.net/534k9e2n/1/

css width same as height

The only CSS way of doing this at the moment (AFAIK) is using viewport relates values (vh / vw )

Support is not great at the moment: http://caniuse.com/viewport-units but here is a quick demo

JSFiddle

CSS

.box {
    background-color: #00f;
    width: 50vw;
    height:50vw;
}

The box is responsive but will always remain square.

Pure % values will not work as height:100% does not equal width:100% as they refer to different things being the relevant dimensions of the parent.

How to make height equal width with css

use window.getComputedStyle to get the computed width, then do calculations to get the equvialent percentage that will make it the same size as the width.

HTML

<div class="someDiv" style="width:900px;height:200px;">
   <a class="someAnchor" style="display:block; float:left; width:35%; background:green"></a>
</div>

var anchor = document.querySelector(".someDiv .someAnchor");
var astyle = window.getComputedStyle(anchor);
anchor.style.height = astyle.width; //this will make it static though

//to make it a percentage like width so it will expand and contract with resize of parent element

var pstyle = window.getComputedStyle(anchor.parentNode);
var pheight = parseInt(pstyle.height);
var awidth = parseInt(astyle.width);
anchor.style.height = ((awidth/pheight)*100)+"%";

Note that the anchor element will be bigger than the div height wise, to keep it inside the parent you will have to scale it down.

JSFiddle Demo

Image height same as width

Many of us had given you some hints in the comments, so by now you should be able to create a responsive square.

Fit the image inside the square
Just in case you are missing the last part, here is how you can fit the image (with any aspect ratio) into that square. It also means that your image will be cropped if it's not squared.

Snippet:

.container {
  position: relative;
  width: 37%; /* The size you want */
}
.container:after {
  content: "";
  display: block;
  padding-bottom: 100%; /* The padding depends on the width, not on the height, so with a padding-bottom of 100% you will get a square */
}

.container img {
  position: absolute; /* Take your picture out of the flow */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; /* Make the picture taking the size of it's parent */
  width: 100%; /* This if for the object-fit */
  height: 100%; /* This if for the object-fit */
  object-fit: cover; /* Equivalent of the background-size: cover; of a background-image */
  object-position: center;
}

<div class="container">
  <img src="https://images.pexels.com/photos/1249588/pexels-photo-1249588.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"/>
</div>

How to set equal height and width based on dynamic text using CSS only

You can place a single paragraph element inside a div and give the p a margin using calc() which takes into account the width of the div (because % is always based on the width of the parent element).

Working Example:

div {display: inline-block;color: rgb(255, 255, 255);background-color: rgb(255, 0, 0);padding: 6px;}
p {margin: calc(50% - 12px) 0; /* half the width minus half the line-height */font-size: 18px;line-height: 24px;}

<div><p contenteditable="true">Click me & edit to change div size.</p></div>

Set width according to height

There are two techiques I am aware of to keep the aspect ratio of an element according to it's height :

When height is relative to the viewport :

You can use vh units :

div {  width: 75vh;  height: 75vh;  background:darkorange;}

<div></div>

CSS height equal to width

You may do this :

fiddle

body, html {    height:100%;    margin:0;}.wrap1 {    height:0;    padding-bottom:46%;    position:relative;}.wrap2 {    position:absolute;    top:0;    left:0;    height:100%;    width:100%;    max-height:264px;    min-height:136px;    overflow:hidden;}.wrap2 div {    display: inline-block;    min-width: 64px;    max-width: 128px;    width: 23%;    margin: 2px;    position: relative;    z-index: 15;    background:teal;}div>img {    width:100%;    height:auto;    display:block;}

<div class="wrap1">    <div class="wrap2">        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>        <div>            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />        </div>    </div></div>

CSS width in % and height in px and both same length

You could use top/bottom padding property in percentage, to achieve the result.

Example Here.

.box {
    width: 25%;
    padding-bottom: 25%;
}

A percentage value on top/bottom padding or margins is relative to the width of the box's containing block.

8.4 Padding properties: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', and 'padding'

<percentage>
The percentage is calculated with respect to the width of
the generated box's containing block, even for 'padding-top' and
'padding-bottom'.

Adding the content

Since the the height of the box grows by adding content, we could wrap the content by an element .wrapper and position that absolutely relative to the box, and then use top, right, left and bottom properties to fill the entire space of the box.

Example Here

<div class="box">
  <div class="wrapper">
    <!-- content goes here... -->
  </div>
</div>

.box {
  width: 25%;
  position: relative;
}

.box:after {
  content: "";
  display: block;
  padding-top: 100%; /*  1:1 square */
}

.box > .wrapper {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

For further information you could refer my answer here (Responsive Container section).