html – min-height和min-width应始终相等

我在动态填充的div上使用min-height和min-width.有没有办法确保宽度总是与高度(方形)相同,使用css？

解决方法

您可以使用垂直边距或填充％值,它将父宽度作为参考.

基本上：< div id =“ratio1-1”> < DIV>内容< / DIV>< / DIV>和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 */
}

您甚至可以将伪元素和div垂直对齐到顶部,中心,底部或您想要使用的任何其他值.

这里是一个例子,用于拟合图像背景比率和垂直对齐的内容：http://codepen.io/gc-nomade/pen/letdh

root标签可以显示为表格,伪标签显示为table-cell;,伪取0表示宽度.