保持與所有設備相同的尺寸。 HTML＆CSS

我想知道如何在所有設備上保留一個元素的大小（f.ex立方體）。當您調整瀏覽器窗口的大小時，元素將保持相同的「形式」，但變得更小。我的意思是當你水平調整瀏覽器窗口大小時，元素（f.ex cube）將保持相同的「形式」。所以它不會比寬高。保持與所有設備相同的尺寸。 HTML＆CSS

我知道我必須使用百分比而不是px上的高度和高度。但是當我這樣做時，元素當然仍然是當前設備或屏幕的百分比。我在描述時非常糟糕，所以我會給出一個的例子：當我在學校用HTML和CSS製作計算器時，它完美地安裝了屏幕。但學校的屏幕是平方的（與高度相同）。家裏的屏幕是長方形的（與高度寬度不一樣）。所以家裏的計算器要寬。你現在明白了嗎？如果你沒有請讓我知道。

下面是如何看起來像我的屏幕家庭圖片：Full sized browser window home調整大小寬度窗口小：Smaller in width browser window at home

很遺憾壞描述..和英語。

來源

2017-01-27 Tobias Rasmussen

你的代碼在哪裏？ –

這聽起來像你的意思是「保持相同的長寬比」，而不是「保持相同的大小」。如果沒有[MCVE]（http://stackoverflow.com/help/mcve）很難說，但是你總是可以使用類似'width：calc（50vh - 100px）的東西來將事物的寬度和高度放在視口高度上。 '和'height：calc（50vh - 100px）;'。 –

好的，謝謝保羅。這是我的CSS :. 'calcBg background-color：#ebebeb; 身高：62.5％; 寬度：30％; 職位：固定; top：15％; 剩餘：36.5％; }' –

我不知道我是否明白你的意思，但如果你的意思是「保持寬高比」，你應該嘗試this。將你的元素包裝在另一個容器中，使用容器底部的填充並使元素佔據其所有空間。

來源

2017-01-27 19:57:37

這就是我的意思！我怎麼可能不知道這個詞。謝謝:) –

但我如何將我的高度和寬度轉換爲寬高比數字？這就是我的calcBg類看起來像'.calcBg background-color：#ebebeb; 身高：62.5％; 寬度：30％; 職位：固定; top：15％; 剩餘：36.5％; '按鈕作爲孩子。 –

沒有一些代碼就有點難以得到你的意思，你能不能做一個jsfiddle，以便我能看到你想要的東西？ –

保持與所有設備相同的尺寸。 HTML＆CSS

回答

相關問題