CSS：使div寬度與高度成比例

Question

這有點難以解釋，但是：我想要一個響應高度 div ( height: 100% )，它將與高度成比例地縮放寬度（反之亦然）。

我知道這種方法利用padding-top hack 使高度與寬度成正比，但我需要它以相反的方式工作。 話雖如此，我並不十分熱衷於該方法中內容的絕對定位元素的額外要求，所以我意識到我很可能在這里要求月球在棍子上。

為了幫助可視化，這是一張圖片：

...這是一個jsFiddle ，說明幾乎相同的事情。

值得注意的是，我已經在使用:before和:after偽元素來垂直對齊我想要按比例縮放的框的內容。

我真的很喜歡不必恢復到 jQuery，因為這將是對調整大小處理程序的內在要求，並且通常需要更多的調試......但如果這是我唯一的選擇，那么fiat 。

Answer 1

哦，您可能可以使用“填充頂部”技巧。

width: 50%;
height: 0;
padding-bottom: 50%;

http://absolide.tumblr.com/post/7317210512/full-css-fluid-squares

或者：

.square-box{
    position: relative;
    width: 50%;
    overflow: hidden;
    background: #4679BD;
}
.square-box:before{
    content: "";
    display: block;
    padding-top: 100%;
}

http://codeitdown.com/css-square-rectangle/

CSS 中的垂直填充與元素的寬度有關，而不是高度。

Answer 2

一段時間以來，我一直想知道這個問題的純 CSS 解決方案。 我終於想出了一個使用 ems 的解決方案，可以使用 vws 逐步增強：

有關完整的工作演示和說明，請參閱 codepen 鏈接：

http://codepen.io/patrickkunka/pen/yxugb

簡化版：

.parent {
  font-size: 250px; // height of container
  height: 1em;
}

.child {
  height: 100%;
  width: 1em; // 100% of height
}

Answer 3

字體解決方案要求知道高度。 我找到了一種解決方案，可以在寬度和高度未知的父 div 中使元素成比例。 這是一個演示。

我使用的技巧是將圖像用作間隔。 代碼解釋：

<div class="heightLimit">
 <img width="2048" height="2048" class="spacer"
  src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAA
       P///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
 <div class="filler">
  <div class="proportional">
  </div>
 </div>
</div>

所以它不是最漂亮的，有兩個額外的 div 和一個無用的圖像。 但情況可能更糟。 圖像元素需要具有所需尺寸的寬度和高度。 寬度和高度需要與允許的最大尺寸一樣大（一個功能！）。

的CSS：

.heightLimit {
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 width: auto;
 max-width: 100%;
 overflow: hidden;
}

這個元素是為了限制高度，但水平擴展（ width: auto ）雖然永遠不會超出父max-width ）。 溢出需要隱藏，因為有些孩子會突出到 div 之外。

.spacer {
 width: auto;
 max-height: 100%;
 visibility: hidden;
}

該圖像是不可見的，並且與高度成比例地縮放，而寬度被調整並強制父對象的寬度也被調整。

.filler {
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
}

該元素需要使用絕對定位的容器填充空間。

.proportional {
 position: relative;
 width: 100%;
 height: 0;
 padding-bottom: 100%;
}

在這里，我們的比例元素使用熟悉的 padding-bottom 技巧獲得與寬度成比例的高度。

不幸的是，Chrome 和 IE 中存在一個錯誤，因此如果您使用 Javascript 修改父元素，例如在我的演示中，尺寸將不會更新。 如我的演示所示，有一個 hack 可以用來解決這個問題。

Answer 4

您可以使用視圖高度 (vh) 作為寬度的單位。

這是您要求的 20px 邊距的示例。

 .parent {
   margin : 20px;
}
.child {
   width: calc(100vh - 40px);
   height : calc(100vh - 40px);
   margin:0 auto;
   background: red;
   box-sizing:border-box;
   padding:10px;
}

見小提琴： https ://jsfiddle.net/svobczp4/

Answer 5

根據@kunkalabs 的回答（這真的很聰明），我想出了一個解決方案，可以讓您保留繼承的字體大小。

HTML：

<div id='rect'>
    <div id='content'>Text</div>
</div>

CSS：

#rect {
    font-size: 1000%;
    height: 1em;
    width: 1em;
    position: relative;
}

#content {
    font-size: 10%;
}

所以基本上#content的字體大小是 (100 / $rectFontSize) * 100% 的矩形。 如果您需要矩形的確定像素大小，您可以設置#rect的父級字體大小……否則只需調整字體大小，直到它達到您想要的位置（並在此過程中激怒您的設計師）。

Answer 6

您可以通過使用 SVG 來實現。

這取決於一個案例，但在某些情況下它真的很有用。 例如 - 您可以設置background-image而不設置固定高度，或者使用它以16:9和position:absolute的比例嵌入<iframe> 。

對於3:2比例設置viewBox="0 0 3 2"等等。

例子：

 div{width:35%;background-color:red} svg{width:100%;display:block;visibility:hidden}

 <div> <svg viewBox="0 0 3 2"></svg> </div>

Answer 7

在較新的瀏覽器上，我們可以使用固定高度的aspect-ratio ，寬度將相應計算。

img {
    aspect-ratio: 1.2;
    height: 250px;
    max-width: 500px;
}

但是瀏覽器對aspect-ratio的支持還不夠好。 我喜歡@Jakub Muda 提出的SVG解決方案，只是它需要修改標記。 我通過使用content屬性將SVG移動到 CSS。 在較新的瀏覽器上，它會禁用 SVG hack 並切換到aspect-ratio屬性。

 document.querySelector('.nav').addEventListener('click', function(e) { var index = parseInt(e.target.dataset.index); if (!index) { return; } var elements = document.querySelectorAll('.box'); for (var i = elements.length; i > 0; i--) { elements[i - 1].classList.toggle('hide', i !== index); } });

 .wrapper { max-width: 500px; margin: 0 auto; width: 100%; height: 250px; text-align: center; background: green; } .box { display: inline-flex; position: relative; max-width: 100%; } /* SVG Hack */ .box::before { display: block; line-height: 0; max-width: 100%; content: 'test'; } [data-aspect-ratio="1"]::before { content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' height='250'></svg>"); } [data-aspect-ratio="2"]::before { content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 1' height='250'></svg>"); } [data-aspect-ratio="3"]::before { content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 1' height='250'></svg>"); } @supports (aspect-ratio1: 1) { /* Modern browsers */ .box { height: 100%; background: green; } .box::before { display: none; } [data-aspect-ratio="1"] { aspect-ratio: 1; } [data-aspect-ratio="2"] { aspect-ratio: 2; } [data-aspect-ratio="3"] { aspect-ratio: 2; } } .content { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .content>svg { display: block; width: 100%; position: absolute; top: 50%; left: 50%; height: auto; transform: translate(-50%, -50%); } .nav { text-align: center; } .hide { display: none; }

 <!doctype html> <html lang="en"> <head> <title>Width proportional to height in CSS</title> </head> <body> <div class="wrapper"> <div class="box" data-aspect-ratio="1"> <div class="content"> <svg viewBox="0 0 100 100" width="100" height="100" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="2" width="96" height="96" style="fill:#DEDEDE;stroke:#555555;stroke-width:2"/><text x="50%" y="50%" font-size="18" text-anchor="middle" alignment-baseline="middle" font-family="monospace, sans-serif" fill="#555555">100&#215;100</text></svg> </div> </div> <div class="box hide" data-aspect-ratio="2"> <div class="content"> <svg viewBox="0 0 200 100" width="200" height="100" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="2" width="196" height="96" style="fill:#DEDEDE;stroke:#555555;stroke-width:2"/><text x="50%" y="50%" font-size="18" text-anchor="middle" alignment-baseline="middle" font-family="monospace, sans-serif" fill="#555555">200&#215;100</text></svg> </div> </div> <div class="box hide" data-aspect-ratio="3"> <div class="content"> <svg viewBox="0 0 300 100" width="300" height="100" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="2" width="296" height="96" style="fill:#DEDEDE;stroke:#555555;stroke-width:2"/><text x="50%" y="50%" font-size="18" text-anchor="middle" alignment-baseline="middle" font-family="monospace, sans-serif" fill="#555555">300&#215;100</text></svg> </div> </div> </div> <div class="nav"> <button data-index="1">1</button> <button data-index="2">2</button> <button data-index="3">3</button> </div> </body> </html>

Answer 8

使父 DIV 表現得像一個表格單元格並垂直對齊子元素。 無需做任何填充技巧。

HTML

<div class="parent">
<img src="foo.jpg" />
</div>

CSS

.parent { width:300px; height:300px; display:table-cell; vertical-align:middle; }