規模div來填補畫面，同時保持長寬比

下面是我在談論的頁面的的jsfiddle：http://jsfiddle.net/nmUuU/規模div來填補畫面，同時保持長寬比

我需要外部的div（與class="page"）擴大或縮小，以填補在用戶的屏幕上。我希望div（顯然，它的孩子）的長寬比保持不變。我試過用像jQuery插件TextFill，但沒有成功。

我已經用圖像做過這一千次了，但這次我有一個div裏面有一堆元素。它還能完成嗎？

編輯：好像我可能沒有強調這一點，但我希望div的孩子也增加大小。它應該看起來像div是一個剛剛放大的圖像;裏面的元素應該保持彼此之間的關係，同時擴展以填充父項。它應該從看起來像this看起來像this（添加邊框以指示屏幕邊緣）。

雖然純CSS總是很好，但我猜它會涉及一些Javascript。即使只是幾個指針，將不勝感激。

來源

2013-05-21 Dan Hlavenka

爲什麼不使用媒體查詢？ –

我不認爲這隻能用CSS來完成，因爲你需要能夠讀取某些元素的寬度，這是目前無法完成的。但由於JS現在是你行，你可以使用jQuery做這樣的事情：

function zoomit() { 
    $("#page1").css('zoom', $(window).width()/$("#page1").width()); 
} 

$(document).ready(zoomit); 

$(window).resize(zoomit);

這裏有一個jsFiddle

這裏是不使用zoom最新版本jsFiddle但僅限供應商標籤-transform。

編輯：

我剛剛意識到zoom實際上並不在Firefox上運行。相反，您可以使用Firefox的-moz-transform: scale(x, y);，並將x和y設置爲適當的值，您可以使用與上例中已完成的相同方法。

EDIT2

這裏的a link to w3schools有關CSS 2D轉換的一些信息和其他瀏覽器的前綴，因爲你在評論中提到，寫的東西，檢查是否爲width > height和周圍的其他方法，然後立足對此的轉換，應該對所有瀏覽器都有效。發佈jsFiddle如果你得到它的工作，我會把它添加到答案，我很高興有一個去它，如果你沒有得到它的工作。

來源

2013-05-21 06:16:31

根據窗口大小，你的代碼有時會扼流（當width> height時，我需要將'width（）'改爲'height（）'）。這是一個好的開始，但是你知道一個非CSS3的方式嗎？即使Firefox不支持它。 –

而我看到你只是編輯了你的答案，所以我會試一試。 –

http://jsfiddle.net/nmUuU/21/show/約有90％的工作。在我嘗試過的所有*正常*分辨率下看起來都很好，但是當窗口大約是寬闊的，寬度大約爲1000px時，它會以我無法程序化檢測的方式變得很奇怪。 –

嘗試指定width和height中的百分比而不是像素。

.page{ 
    margin: auto; 
    width: 100%; 
    height: 100%; 
    color: black; 
    background-color: #eee; 
    text-align: center; 
    font-family: Raleway, Helvetica, Arial, sans-serif; 
}

來源

2013-05-21 04:42:49 Praveen

這將如何保持長寬比，或者縮放任何內部元素？ –

裹在另一個div這將是主要的div裏面的內容（類：頁），並讓所有其他元素的位置是：相對

<div class="page"> 
    <div class="wrapper"> 
    </div> 
</div>

CSS：

.page{ 
    position:relative; 
    padding-bottom:100%; /*where the magic happens*/ 
    height:0;    /*where the magic happens*/ 
    overflow:hidden; 
    max-width: 960px; 
    width: 100%; 
    color: black; 
    background-color: #eee; 
    text-align: center; 
    font-family: Raleway, Helvetica, Arial, sans-serif; 
} 
.wrapper{ 
    position:absolute; 
    width:100%; 
    height:100%; 

}

查看FIDDLE

Just r ESIZE窗口和玩它...你的想法...

注：目前飛越內容hidde，你可以，如果你想它滾動...

來源

2013-05-21 04:44:58 DextrousDave

你的例子似乎使外部div大約比屏幕高2倍：http://i.imgur.com/QADYc4u.jpg（注意滾動條） –

html, body{ 
     margin: 0; 
     height: 100%; 
     background-color: #eee; 
    }.page{ 
     margin: auto; 
     width: 960px; 
     height: 745px; 
     color: black; 
     text-align: center; 
     font-family: Raleway, Helvetica, Arial, sans-serif; 
    }

小提琴：http://jsfiddle.net/nmUuU/14/show/

來源

2013-05-21 05:54:35

這不會改變任何內部元素的大小。查看更新後的問題以進行澄清。 –

規模div來填補畫面，同時保持長寬比

回答

相關問題