min-height 和 min-width 应该始终相等答案

【问题标题】：min-height and min-width should always be equalmin-height 和 min-width 应该始终相等
【发布时间】：2014-02-19 02:24:21
【问题描述】：

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

【问题讨论】：

在这种情况下，您不希望width 和height 相等，而不是min-width 和min-height，还是这个问题还有更多？
它看起来不能只用 CSS 完成：不过看看这个 answer。
请参阅 stackoverflow.com/questions/1311068/… 了解可能的纯 CSS 解决方案。
@Nit 我需要它动态扩展，这是固定的width 和height 无法做到的。

标签： html css

【解决方案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 to top, center, bottom或您想玩的其他任何值。

在这里，一个示例与图像背景比率和内容垂直对齐的另一个比例： @987654321 @

root标签可以显示为表，伪和儿童显示为表格; pseudo的宽度为0。

【讨论】：

感谢您的帮助，但它似乎不起作用。我创建了一个jsfiddle。请看看，告诉我我能做什么。
好吧，如果我遵循示例，它似乎对我有用:) @987654323 @

【解决方案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';
}

【讨论】：

【解决方案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 以适应。这不会根据相对容器大小进行调整以适应内容。

【讨论】：

我的回答允许插入内容 ;) ，但是是的，重点是以父母宽度为参考的垂直边距/填充百分比。伪元素是它自己标签的子元素，所以这就是它需要 100% 的原因。
正如你所说，因此大喊大叫，现在也是 +1 :) 我倾向于将此解决方案与绝对定位的图像或视频一起使用，以保持响应的纵横比，因此内容大小通常无关紧要。