The minimum height and minimum width should always be equal

Question

I use min-heightalso min-widthin div which will be filled dynamically. Is there a way to ensure that the width will always be the same as the height (square) using css?

Answer 1

you can use a vertical field or padding with% values, it will have the width of the parent link as a link.

mainly: <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 divto top, center, bottomor different value with which you want to play.

, : http://codepen.io/gc-nomade/pen/letdh

, table-cell;, pseudo 0 .

Answer 2

CSS, JavaScript:

min-width min-height , :

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

, , width height, offsetWidth:

var height = document.getElementById('divID').offsetHeight;
var width = document.getElementById('divID').offsetWidth;
if (height !== width) {
    document.getElementById('divID').style.height = width + 'px';
}

Answer 3

This will help if you post your code, but I think you bark the wrong tree with a minimum width and a minimum height. I see that @GCyrillus posted a similar solution, but here is 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 visibleas required. This will not be adjusted to fit the content, based only on the relative size of the container.