Question

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

Answer 1

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

基本上：<div id="ratio1-1"> <div>content</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 */
}

你甚至可以vertical-align pseudo-element和div到top, center, bottom或者你想要玩的其他任何值。

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

root标签可以显示为table，伪和子显示为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

如果你发布了你的代码会有所帮助，但我认为你正在用最小宽度和最小高度咆哮错误的树。我看到@GCyrillus发布了一个类似的解决方案，但这是用css使用百分比来实现这个目标的另一种方法：

http://jsfiddle.net/6N2MW/

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

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

您可能希望添加overflow: hidden;或visible以适应。这不会根据相对容器大小调整以适应内容。

最小高度和最小宽度应始终相等

3 个答案: