我正在使用HTML5和CSS3進行佈局。HTML5/CSS3製作方形div，寬度爲100％，需要高度等於寬度

我需要瓷磚在頁面上，這是一個正方形div元素。該瓷磚是在自舉列內，我需要的寬度自動匹配列的寬度，但我發現很難讓高度=寬度，因爲寬度是一個百分比值：100％。

HTML：

... 
<div class="col-md-2"> 
    <div class="tile tile-square tile-auto"> 
     ... 
    </div> 
</div> 
...

CSS：

.tile-square{ 
    width: 100%; 
    height: how to do this? 
}

我用jQuery/js的解決方案好，但我更喜歡用CSS3來解決這個孤單。在CSS3中有一個「calc（）」語句，但我不知道它是否可以實現此功能。

來源

2013-12-09 Edi Wang

檢查這些[link1]（http://www.mademyday.de/css-height-equals-width-with-pure-css.html）[link2]（http://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout） –

看看這個：http://siebennull.com/equal_width_height.html – Andrew

我不知道純CSS的方法，但在jQuery中，你可以使用$(document).width();。它將返回寬度，您可以將其設置爲高度。

$(document).width();將返回值px。

來源

2013-12-09 05:10:09

我相信你不能用CSS3做到這一點。 CSS只是做造型。您可以使用jQuery/JS儘管實現這一目標：

var width = $('div.tile-square').width(); 
$('div.tile-square').height(width + 'px');

或者你也可以做到這一點（不作爲首選）：

$('div.tile-square').css('height', $('div.tile-square').css('width'));

的jsfiddle：http://jsfiddle.net/7k8pp/3/

來源

2013-12-09 05:12:38 aug

在我看來他應該使用.height（）和.width（）而不是.ccs（'height'）和.css（'width'） –

@AdityaPonkshe這些函數之間的唯一區別是返回'px'中的值，並返回一個實際的數字（參見[here] //stackoverflow.com/questions/13279555/csswidth-and-cssheight-vs-width-and-height））。對於這種情況，這並不重要。 – aug

我知道他們之間的區別。在我看來，正確的做法是將寬度存儲在不同的變量中，然後將其用作高度。你的方法在過去給我造成了許多錯誤。 –

純CSS2.1，你可以通過設置padding-top: 100%（因爲垂直填充是根據容器寬度計算的，而不是高度）來使盒子保持1：1的比例。對您的問題的評論提供了一些與示例相關的鏈接。

來源

2013-12-09 05:17:32

完成與jQuery

var x = $('.element').width(); 
$('.element').css(
    {'height': x + 'px'} 
);

演示上JSFiddle

來源

2013-12-09 05:29:50 Cem

重複的答案。 –

遲到了，但仍然具有現實意義。有人提到，儘管沒有一個全面的例子，但可以使用純CSS來實現。

要保留任何元素的縱橫比，我們可以使用padding-top（它基於元素的寬度）。因此，如果我們將元素的寬度設置爲25%例如，將padding-top屬性設置爲25%將強制該元素變爲正方形。

看一看下面的例子：

.tile { 
 
    background: #369; float: left; 
 
    width: 23%; 
 
    margin: 1%; 
 
    position: relative; 
 
} 
 
.tile-square { 
 
    padding-top: 23%; /* 23% (.tile width) - 2% (top and bottom margin) */ 
 
    height: 0; 
 
} 
 
.tile__content { 
 
    position: absolute; 
 
    top: 0; left: 0; bottom: 0; right: 0; 
 
    padding: 10px; 
 
    color: #fff; 
 
} 
 
body {margin: 1%;}

<div class="tile tile-square tile-auto"> 
 
    <div class="tile__content">Tile 1</div> 
 
</div> 
 
<div class="tile tile-square tile-auto"> 
 
    <div class="tile__content">Tile 2</div> 
 
</div> 
 
<div class="tile tile-square tile-auto"> 
 
    <div class="tile__content">Tile 3</div> 
 
</div> 
 
<div class="tile tile-square tile-auto"> 
 
    <div class="tile__content">Tile 4</div> 
 
</div>

有采用這種方法的一個問題...

，因爲我們使用填充以強制的高度元素與寬度相同，如果我們將內容添加到.tile，添加的內容將看起來出現在底部，元素將不再是方形。爲了克服這個問題，我們將.tile元素設置爲relative，然後在裏面添加第二個元素（.tile__content）。我們然後絕對定位.tile__content，因此它坐落在填充物佔據的區域。

來源

2017-01-31 10:45:13

HTML5/CSS3製作方形div，寬度爲100％，需要高度等於寬度

回答

有采用這種方法的一個問題...

相關問題