0

I'm trying to create a square that is the largest possible size for a given div. So the square will stretch out both width and height until it reaches the edge of the div.

What I have at the moment (http://codepen.io/andyjessop/pen/RryXpv) is a square that will keep its aspect ratio as the width changes, but here the width and height of the square are determined solely by the width of the containing div, so if you change the height of the outer div (by resizing the window), the square size stays the same and goes off screen.

#square {
  position: relative;
  width: 50%;
  margin: auto;
  background: white;
}

#square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

How can I make it so that the size of the square also scales with containing div height?

babbaggeii
  • 7,577
  • 20
  • 64
  • 118
  • http://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout – thatOneGuy Jan 29 '16 at 10:00
  • 1
    If your containers size is relative to the viewport size, you can use this approach : [Fit responsive square in viewport according to width and height](http://stackoverflow.com/questions/23630140/fit-responsive-square-in-viewport-according-to-width-and-height/23631436#23631436) – web-tiki Jan 29 '16 at 10:08
  • @web-tiki - that's what I'm looking for except it's relative to the viewport height, rather than a containing div of arbitrary size. – babbaggeii Jan 29 '16 at 10:15

0 Answers0