CSS響應格，當高度設置像素

我有一個容器div，它的高度設置像素 - 例如：height:500px。這個div包含的任何內容都是使用%進行響應，並保持縱橫比完美。但是，當然，當我調整瀏覽器窗口的大小使其更小時，保持相同高度的唯一div就是容器div。我怎樣才能使它響應 - 當它有一個給定的標準高度像素開始時，改變容器div的高度？非常感謝您提供的解決方案。CSS響應格，當高度設置像素

我在這裏做一個簡單的例子：http://jsfiddle.net/5j9jddbk/

來源

2014-11-13 durduvakis

您可以刪除高度，讓高度由內部元素設置。您也可以根據內容寬度設置高度。你有父元素的最大寬度，持有容器的那個？ – skobaljic

@skobaljic是的，我知道我可以刪除高度，但我希望用戶有這個選擇。在我測試包含div的父元素使用完整瀏覽器寬度100％的情況下。 – durduvakis

閱讀有關媒體查詢，它們允許您根據設備應用CSS（從而解析屏幕）。 – Paul

This link描述它完美。

你需要找到你想要的元素的縱橫比。在你的情況下，它似乎是640乘200，這使得你的寬高比有62.5％的百分比。（我只是這樣說，因爲您使用的背景圖像是640x200）

使用所提供的鏈接中的代碼，您只需給容器一個寬度，將一個僞元素:before添加到它並給出:before62.5%的padding-top。然後你需要將你的容器放在裏面。

所以你的容器需要一些東西在上面。首先，使用box-sizing:border-box;只要你有邊距或邊框處理，然後給它的relative

.container { 
    width:100%; 
    border:10px solid red; 
    position:relative; 
    box-sizing:border-box; 
}

的位置之後，你需要一個:before僞元素添加進去。它的容器（即100％），這將需要給定的寬度和使用padding-top，使高度寬度之比：

.container:before { 
    content:""; 
    display:block; 
    padding-top:62.5%; 
}

在此之後，你只需要確保你的裏面的內容定位absolute，寬度和高度都是100％。

.inner 
{ 
    width:100%; height:100%; 
    background:url('http://p1.pichost.me/640/1/1236135.jpg') no-repeat; 
    -webkit-background-size:100%; 
     -moz-background-size:100%; 
     -o-background-size:100%; 
      background-size:100%; 
    text-align:center; 
    font-size:40px; color:#fff; 
    position:absolute; 
    top:0; 
    left:0; 
}

這裏的小提琴示範 http://jsfiddle.net/bcbvLLrc/

一個建議，我會做是爲了讓剛剛裏面你的容器叫.content然後給這些樣式到內容的另一個DIV：

.content { 
    width:100%; 
    height:100%; 
    position:absolute; 
    top:0; 
    left:0; 
}

這將使確保內容是您容器的完整大小，然後您可以根據需要設置內容的樣式，例如，您可以在內容中放置額外的列或行而不必擔心任何地方溢出。

來源

2014-11-13 21:38:40 ntgCleaner

哇這是智能的，你是如何計算寬高比的？哇，這太瘋狂了！ – durduvakis

謝謝！我所做的只是找到寬度和期望的高度。在你的情況下，你使用的圖片是640x400。 400除以640. 400/640 = 0.625乘以100從小數到百分比= 62.5％ – ntgCleaner

我很驚訝。這是天才的東西。我會做一個php函數來做這個計算，並且一旦我想要用戶選擇容器的高度，就動態地設置'.container：before {padding-top：###}'之前。我希望我會工作！否則我將不得不找到你並再次問你:-) – durduvakis

這裏是一個解決方案，您將針對上級元素的寬度高度：

<div class="wrapper"> 
    <div class="container"> 
     <div class="inner">resize me.. 
      <br>..make me smaller</div> 
    </div> 
</div>

和CSS：

.wrapper { 
    width: 100%; 
    max-width: 980px; 
    margin: 0 auto; 
} 
.container { 
    padding-bottom:51%; 
    position: relative; 
    border:10px solid red; 
    box-sizing: border-box; 
    /* Because of border */ 
    background:url('http://p1.pichost.me/640/1/1236135.jpg') no-repeat; 
    background-size:100%; 
    text-align:center; 
    font-size:40px; 
    color:#fff; 
} 
.inner { 
    position: absolute; 
    left: 0; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    width: 100%; 
}

Fiddle < ---

設置元素的填充或保證金使用百分比作爲單位直接指向父元素寬度。Read more...

來源

2014-11-13 21:51:15 skobaljic

哇這太好了！ – durduvakis

這是一個很好的解決方案。我也會使用它。我可以爲這兩個答案投票嗎？：d – durduvakis

CSS響應格，當高度設置像素

回答

相關問題