4

I'm using min-height and min-width on a div that will be filled dynamically. Is there a way to ensure that the width will always be the same as the height (square), using css?

Esser
  • 540
  • 1
  • 4
  • 16
  • In that case don't you want `width` and `height` to be equal, not `min-width` and `min-height`, or is there more to this question? – Etheryte Feb 18 '14 at 17:59
  • It doesn't look like it can be done with only CSS: take a gander at this [answer](http://stackoverflow.com/a/5445536/899126) though. – Chris Forrence Feb 18 '14 at 17:59
  • See http://stackoverflow.com/questions/1311068/scale-a-div-to-fit-in-window-but-preserve-aspect-ratio for possible CSS-only solutions. – Etheryte Feb 18 '14 at 18:00
  • @Nit I need it to expand dynamically, which is impossible to do with a fixed `width` and `height`. – Esser Feb 18 '14 at 18:01

3 Answers3

1

you can use vertical margin or padding with % values, it will takes parent width as reference.

basicly:<div id="ratio1-1"> <div>content</div></div> and for CSS 

#ratio1-1 {
width:80%;
}
#ratio1-1:before {
display:inline-block;
padding-top:100%;/* equals width of its tag parent */
content:'';
}
#ratio1-1 > div {
display:inline-block;
max-width:95%;/ preserve it to fall under pseudio-element */
}

You can even vertical-align pseudo-element and div to top, center, bottom or whatever else value you want to play with.

here an example wih another ratio used to fit to image background ratio and content vertical aligned : http://codepen.io/gc-nomade/pen/letdh

root tag can be displayed as table and pseudo and child displayed as table-cell;, pseudo takes 0 for width.

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • Thanks for the help, but it doesn't seem to work. I created a [jsfiddle](http://jsfiddle.net/b2GAL/1/). Please give a look and tell me what I can do. – Esser Feb 18 '14 at 18:42
  • well, if i follow the example, it seems to work to me :) http://jsfiddle.net/b2GAL/2/ – G-Cyrillus Feb 18 '14 at 18:49
0

It would not be possible to assure this using CSS, but you can use JavaScript:

If you need the min-width and min-height in particular and want to make them the same, you can use:

var mheight = document.getElementById('divID').style.minHeight;
var mwidth = document.getElementById('divID').style.minWidth;
if (mheight !== mwidth) {
    mheight = mwidth + 'px';
}

However, if you want to make sure that the width is always equal to the height, you should use offsetWidth:

var height = document.getElementById('divID').offsetHeight;
var width = document.getElementById('divID').offsetWidth;
if (height !== width) {
    document.getElementById('divID').style.height = width + 'px';
}
Anonymous
  • 11,748
  • 6
  • 35
  • 57
0

It would help if you posted your code, but I think you're barking up the wrong tree with min-width and min-height. I see @GCyrillus has posted a similar solution, but here's another way to achieve this with css using percentages:

http://jsfiddle.net/6N2MW/

<div class="square"></div>

.square {
    width: 75%;
    height: 0;
    padding-bottom: 75%;
    outline: solid 1px red;
}

You might want to add overflow: hidden; or visible to suit. This will not adjust to fit content, just based on relative container size.

Skrivener
  • 1,003
  • 6
  • 11
  • my answer allows to insert content ;) , but yes the point is the vertical margin/padding in % taking parents width as reference. pseudo-element is child of it's own tag, so this is why it takes 100%. – G-Cyrillus Feb 18 '14 at 18:22
  • As you say, hence the shout out, also the +1 now :) I tend to use this solution with absolutely positioned images or video to keep responsive aspect ratio, so content size is not usually relevant. – Skrivener Feb 18 '14 at 18:28