最小高度和最小寬度應該始終等於

我在將動態填充的div上使用min-height和min-width。有沒有辦法確保寬度將始終與高度（平方）相同，使用CSS？最小高度和最小寬度應該始終等於

2014-02-18 Esser

在這種情況下，您是不是希望'width'和'height'相等，而不是'min-width'和'min-height'，還是這個問題更多？ – Nit

它看起來不像只能用CSS來完成：儘管在這個[回答]（http://stackoverflow.com/a/5445536/899126）上有一點遺憾。 –

請參閱http://stackoverflow.com/questions/1311068/scale-a-div-to-fit-in-window-but-preserve-aspect-ratio瞭解可能的純CSS解決方案。 – Nit

您可以使用垂直邊距或填充百分比值，它將採用父寬度作爲參考。

basicly：<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

根標籤可被顯示爲表和僞和子顯示爲表格單元;，僞爲寬度取0 。

來源

2014-02-18 18:15:46

感謝您的幫助，但它似乎不起作用。我創建了一個[jsfiddle]（http://jsfiddle.net/b2GAL/1/）。請給我看看，告訴我我能做些什麼。 – Esser

好吧，如果我按照這個例子，它似乎對我工作:) http://jsfiddle.net/b2GAL/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'; 
}

來源

2014-02-18 18:10:30 Anonymous

如果你發佈了你的代碼，它會有所幫助，但我認爲你用最小寬度和最小高度吠叫錯誤的樹。我看到@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適合。這不會根據相對容器大小進行調整以適應內容。

來源

2014-02-18 18:19:06 Skrivener

我的答案允許插入內容;），但是是點是垂直邊距/填充以父母寬度爲參考。僞元素是它自己的標記的子元素，所以這就是爲什麼它需要100％。 –

正如你所說，因此大喊大叫，現在+1也是:)我傾向於使用這個解決方案與絕對定位的圖像或視頻，以保持響應的高寬比，所以內容大小通常不相關。 – Skrivener

最小高度和最小寬度應該始終等於

回答

相關問題