我在动态填充的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