Div Square, width size based on 100% height

Question

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.

Answer 1

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>

Answer 2

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.

Answer 3

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.

Answer 4

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