保持 CSS 的寬高比，並在 CSS 中填充螢幕寬度和高度？

問題描述

我有一個網站放在一起，具有大約 16:9 景觀的固定長寬比，就像一個影片。

我想讓它居中和擴充套件，以填補可用的寬度和可用的高度，但不要在任一側增長更大。

例如：

高而薄的頁面將使內容在保持比例高度的同時伸展全寬。
一個寬闊的頁面將使內容拉伸整個高度，具有比例寬度。

有兩種方法我一直在看：

使用具有正確寬高比的影像擴充套件容器 div，但是我無法讓它在主流瀏覽器上的行為方式相同。
設定一個比例的底部填充，但它只對寬度起作用，忽略高度。它的寬度越來越大，顯示垂直捲軸。

我知道你可以很容易地使用 JS，但我想要一個純 CSS 的解決方案。

有任何想法嗎？

最佳解決方案

使用新的 CSS viewport units vw 和 vh(視口寬度/視口高度)

FIDDLE

調整垂直和水平的大小，您會看到元素將始終填充最大視口大小，而不會破壞比例，不使用捲軸！

(PURE)CSS

div
{
    width: 100vw; 
    height: 56.25vw; /* height:width ratio = 9/16 = .5625  */
    background: pink;
    max-height: 100vh;
    max-width: 177.78vh; /* 16/9 = 1.778 */
    margin: auto;
    position: absolute;
    top:0;bottom:0; /* vertical center */
    left:0;right:0; /* horizontal center */
}



* {
  margin: 0;
  padding: 0;
}
div {
  width: 100vw;
  height: 56.25vw;
  /* 100/56.25 = 1.778 */
  background: pink;
  max-height: 100vh;
  max-width: 177.78vh;
  /* 16/9 = 1.778 */
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  /* vertical center */
  left: 0;
  right: 0;
  /* horizontal center */
}
<div></div>

如果你想使用最大的 90％寬度和高度的視口：FIDDLE



* {
  margin: 0;
  padding: 0;
}
div {
  width: 90vw;
  /* 90% of viewport vidth */
  height: 50.625vw;
  /* ratio = 9/16 * 90 = 50.625 */
  background: pink;
  max-height: 90vh;
  max-width: 160vh;
  /* 16/9 * 90 = 160 */
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
<div></div>

此外，瀏覽器支援也不錯：IE9 +，FF，Chrome，Safari-caniuse

次佳解決方案

只需重新編寫 Danield 在 LESS mixin 中的答案，供進一步使用：

// Mixin for ratio dimensions    
.viewportRatio(@x, @y) {
  width: 100vw;
  height: @y * 100vw / @x;
  max-width: @x / @y * 100vh;
  max-height: 100vh;
}

div {

  // Force a ratio of 5:1 for all <div>
  .viewportRatio(5, 1);

  background-color: blue;
  margin: 0;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

第三種解決方案

我的原始問題是如何既具有固定方面的元素，也可以恰好適應指定容器內的元素，這使得它有點小巧。如果你只想要一個單獨的元素來保持它的寬高比，這很容易。

我遇到的最好的方法是提供零高度，然後使用百分比 padding-bottom 來給它高度。百分比填充總是與元素的寬度成比例，而不是其高度，即使其頂部或底部填充。

W3C Padding Properties

所以利用它可以給一個元素一個百分比的寬度，以便坐在一個容器中，然後填充以指定寬高比，或以其他方式指定其寬度和高度之間的關係。

.object {
    width: 80%; /* whatever width here, can be fixed no of pixels etc. */
    height: 0px;
    padding-bottom: 56.25%;
}
.object .content {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 40px;
}

所以在上面的例子中，物件佔容器寬度的 80％，然後它的高度是該值的 56.25％。如果寬度為 160px，則底部填充，因此高度將為 90 畫素 – 16：9 方面。

這裡的輕微問題可能不是您的一個問題，是您的新物件內沒有自然空間。如果您需要將一些文字放在一起，並且文字需要使用自己的填充值，則需要在其中新增一個容器並指定其中的屬性。

在某些舊的瀏覽器上也不支援 vw 和 vh 單元，所以對我的問題的接受答案可能不可能，您可能不得不使用更多的 lo-fi 。

第四種方案

使用 CSS media query @media 與 CSS viewport units vw 和 vh 一起適應視口的縱橫比。這樣做有利於更新其他屬性，如 font-size 。

這個小提琴演示了 div 的固定長寬比，文字與其比例精確匹配。

初始尺寸基於全寬：

div {
  width: 100vw; 
  height: calc(100vw * 9 / 16);

  font-size: 10vw;

  /* align center */
  margin: auto;
  position: absolute;
  top: 0px; right: 0px; bottom: 0px; left: 0px;

  /* visual indicators */
  background:
    url(data:image/gif;base64,R0lGODlhAgAUAIABAB1ziv///yH5BAEAAAEALAAAAAACABQAAAIHhI+pa+EPCwA7) repeat-y center top,
    url(data:image/gif;base64,R0lGODlhFAACAIABAIodZP///yH5BAEAAAEALAAAAAAUAAIAAAIIhI8Zu+nIVgEAOw==) repeat-x left center,
    silver;
}

然後，當視口比期望的寬高比寬時，切換到高度作為基準度量：

/* 100 * 16/9 = 177.778 */
@media (min-width: 177.778vh) {
  div {
    height: 100vh;
    width: calc(100vh * 16 / 9);

    font-size: calc(10vh * 16 / 9);
  }
}

這是非常相似的 max-width 和 max-height approach 由 @Danield，更靈活。

第五種方案

我明白你要求你想要一個 CSS 具體的解決方案。為了保持縱橫比，您需要將高度除以所需的縱橫比。 16：9 = 1.777777777778 。

要獲取容器的正確高度，您需要將當前寬度除以 1.777777777778 。由於您不能使用 CSS 檢查容器的 width，或者除以百分比是 CSS，這是不可能沒有 JavaScript(據我所知) 。

我寫了一個工作指令碼，將保持所需的縱橫比。

HTML

<div id="aspectRatio"></div>

CSS

body { width: 100%; height: 100%; padding: 0; margin: 0; }
#aspectRatio { background: #ff6a00; }

JavaScript 的

window.onload = function () {
    //Let's create a function that will scale an element with the desired ratio
    //Specify the element id, desired width, and height
    function keepAspectRatio(id, width, height) {
        var aspectRatioDiv = document.getElementById(id);
        aspectRatioDiv.style.width = window.innerWidth;
        aspectRatioDiv.style.height = (window.innerWidth / (width / height)) + "px";
    }

    //run the function when the window loads
    keepAspectRatio("aspectRatio", 16, 9);

    //run the function every time the window is resized
    window.onresize = function (event) {
        keepAspectRatio("aspectRatio", 16, 9);
    }
}

如果您想使用不同的比例顯示別的東西，可以再次使用 function

keepAspectRatio(id, width, height);

參考文獻

Maintain aspect ratio of div but fill screen width and height in CSS?

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

保持 CSS 的寬高比，並在 CSS 中填充螢幕寬度和高度？