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

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或者你想玩的任何其他值(value)。

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

root标签可以显示为table和pseudo，child显示为table-cell；，pseudo的宽度取0。