I'm trying to make a responsive square with the width size based on the (100%) height of the element. I believe it's impossible using only CSS.

The square width should be equal to the height (100% of the large container. The large container is more than 100% of the screen). The ratio has to be width=height to keep the square.

I'm trying to make a responsive square with the width size based on the (100%) height of the element. I believe it's impossible using only CSS.

The square width should be equal to the height (100% of the large container. The large container is more than 100% of the screen). The ratio has to be width=height to keep the square.

• javascript
• css
• responsive-design

• 1 You can do this by abusing percentages with padding-bottom. – SLaks Commented Dec 20, 2013 at 16:04
• The problem is that i dont want to define the height by the width, but the width in px using 100% height of the container. – Sebastien-Gath Commented Dec 21, 2013 at 10:49
• To be clearer : A square div width based on percentage-based height – Sebastien-Gath Commented Jan 5, 2014 at 14:13
• been searching for this too, I guess this is not possible with just CSS – Ziarno Commented Apr 2, 2016 at 14:54

9 Answers 9

Take a look... at the aspect-ratio property.

This property makes creating a square div based on height, in the easiest method possible. Here's some example code:

h2 {
  font-family: calibri;
}

#parent {
  height: 96px;
  width: 256px;
  background: grey;
  margin-bottom: 16px;
}

#child {
  height: 80px;
  aspect-ratio: 1 / 1;
  background: lightgrey;
}

#anotherParent {
  height: 96px;
  width: 256px;
  background: grey;
}

#anotherChild {
  height: 50%;
  aspect-ratio: 1 / 1;
  background: lightgrey;
}

<h2>Absolute height (80px/96px)</h2>
<div id="parent">
  <div id="child">
  </div>
</div>

<h2>Relative height (50%)</h2>
<div id="anotherParent">
  <div id="anotherChild">
  </div>
</div>

Here are a couple of links to help you understand the aspect-ratio property:

• https://css-tricks.com/almanac/properties/a/aspect-ratio/
• https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
• https://support.squarespace.com/hc/en-us/articles/115008538927

You could do this with a tiny inline image. No JS, no extra files.

.container {
  height: 150px;
  width: 100%;
  text-align: center;
  background: #acd;
}
    	
.square {
  display: inline-block;
  height: 100%;
  background: #691;
}

<div class="container">
  <div class="square">
    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" height="100%">
  </div>
</div>

For a CSS-only solution (where you're sizing relative to the screen size), use viewport units. For example:

@media screen and (orientation:landscape) {
    .box{
        height: 100vh;
        width: 100vh;
    }
}
@media screen and (orientation:portrait) {
    .box{
        height: 100vw;
        width: 100vw;
    }
}

(You may want to reduce it to 98 units to eliminate scrolling)

Works great for divs that need to take up a precise proportion of screen space.

JSFiddle here.

Since a square has same width and the height, and you know the width of the square, you can apply the same value to height.

If you can use JS, then please try this: (jQuery)

var wiDth = $('div').css('width'); // get width
$('div').css('height', wiDth); // apply that value to the height

Try it here: http://jsfiddle.net/afzaal_ahmad_zeeshan/vpGUK/

You can accomplish this using javascript. I'm assuming that you have a larger div container, in which you want a square, whose height is the same height as the container. The html is as follows:

<div id="container">
  <div id="square" style="height:100%;">

  </div>
</div>

In javascript, you would simply do:

<script>
  var container = document.getElementById("container");
  var square = document.getElementById("square");

  square.style.width = container.style.height;

  window.onresize=function(){
    square.style.width = container.style.height;
  };
<script>

Hope that helps

I think this can be a good 'css only' solution for you. Cross browser working.

http://absolide.tumblr.com/post/7317210512/full-css-fluid-squares

Good to highlight this nice css rule:

If the vertical paddings (and margins) are specified in percent (%) values the size is a percent of the width of the containing element.

Put it on your <script src="http://code.jquery.com/jquery-1.10.2.js"></script> and try with jquery:

var totalHeight = 0;
$("#yourContainer").children().each(function(){ 
    totalHeight += $(this).height;  
});
$("#yourContainer").css('width', totalHeight + 'px');

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/

You can assign width and height to the container like this

.container {
    width: 100vh;
    height: 100vh;
}

It will create a square div with 100% height and width=height.