孩子div的大小不應該增加，但只相對於父div減小

Question

如何設計一個子div，其初始大小不應隨父div的擴展而增加，但應該只在父div減小時縮小。 而div應該總是一個正方形。

我想使用最小寬度和最小高度，但它不起作用。

#parentDiv{ 
     position:relative; 
     border:solid pink; 
} 

#childDiv{ 
     position:absolute; 
     right:10px; 
     bottom:10px; 
     width:250px; 
     height:250px; 
     min-width:2%; 
     min-height:2%; 
     border:solid blue; 
} 

Answer 1

你想設置％的寬度和高度，使他們正比於母公司的大小，並設置到任何你想要的最大尺寸是最大高度和最大寬度。

這樣：

width: 20%; 
height: 20%; //will make sure div is always 20% of parent's height 
max-width: 250px; 
max-height: 250px; //will never go bigger than 250px 

Answer 2

你只會做這樣的事情：JsFiddle

#parent { 
    width: 80%; 
    height: 300px; 
    background: #f5f5f5; 
    margin: auto; 
    position: relative; 
} 

#child { 
    width: 80%; 
    height: 200px; 
    max-width: 500px; 
    min-width: 250px; 
    margin: 50px 0; 
    background: #eee; 
    position: absolute; 
} 

Answer 3

這是一個唯一的CSS的解決方案，假設廣場上有一個明確定義的最大寬度。這意味着每當用戶加載頁面並決定減小瀏覽器寬度時，子div可能不會立即開始減少。

HTML：

<div> 
    <div> 
    </div> 
</div> 

CSS：

* { 
    margin: 0; 
    padding: 0; 
} 

body { 
    padding: 10px; 
} 

body > div { 
    height: 300px; 
    outline: 1px solid red; 
    padding: 20px; 
} 

div > div { 
    outline: 1px solid blue; 
    width: 20%; 
    max-width: 100px; 
} 

div > div:before { 
    content: ""; 
    display: block; 
    width: 0; 
    padding-top: 100%; 
} 

而且，這裏有一個小提琴：http://jsfiddle.net/L8e89/。

以下是JavaScript解決方案。子div的最大寬度未定義。相反，當頁面加載時，JS程序會記住初始寬度。如果用戶決定縮小視口尺寸，這次子div將立即開始減小。

相同的HTML：

<div> 
    <div> 
    </div> 
</div> 

稍有不同的CSS：

* { 
    margin: 0; 
    padding: 0; 
} 

body { 
    padding: 10px; 
} 

body > div { 
    height: 300px; 
    outline: 1px solid red; 
    padding: 20px; 
} 

div > div { 
    outline: 1px solid blue; 
    width: 20%; 
} 

div > div:before { 
    content: ""; 
    display: block; 
    width: 0; 
    padding-top: 100%; 
} 

而且，JS/jQuery的：

$(function() { 
    var win = $(window).eq(0), 
     initialWinWidth = win.outerWidth(), 
     $squareDiv = $("div > div").eq(0), 
     squareDivWidth = $squareDiv.outerWidth(), 
     ratio = squareDivWidth/initialWinWidth; 

    $(window).resize(function(evt) { 
     var winWidth = win.outerWidth(); 
     $squareDiv.css("width", winWidth > initialWinWidth ? squareDivWidth : winWidth * ratio); 
    }); 
}); 

而且，小提琴：http://jsfiddle.net/Yy5ah/。