調整div圓圈

我正在嘗試製作帶有單元格的div表格。在單元格內部，我想放置另一個圓形的div。我試圖解決的問題是，當我調整瀏覽器的窗口大小時，我希望這個div圓適應它並保持比例。調整div圓圈

正如你在圖像中看到的那樣，當我縮小窗口的大小時，圓的大小是可以的，但是當窗口大小正常時，circcle的大小太大，我不知道如何限制它。

https://gyazo.com/ebd2f44131dcc2e84b9d0e5cdaf12aed

減小的窗口

https://gyazo.com/6b8889f2d6c59b74bc7036061cf62627 https://gyazo.com/afb97aa2093e7331ae100420e1bac9c9

stylesheet.css中

body,html{ 
    height: 100%; 
    width: 100%; 
} 

.Table{ 
    display: table; 
    position: relative; 
    margin: 0 auto 0 auto; 
    //border:solid;///////////////////////////////////// 
    // width: 100%; 
    // height: 100%; 
    background-color: yellow; 
    table-layout: fixed; 

    width:80%; 
    height:80%; 
} 


.Row{ 
    display: table-row; 

} 

.Cell{ 
    display: table-cell; 
    // border: 5px; 
    border:solid; 
    // border-color: black; 
    // border-radius: 25px; 
    //background-color: blue; 
     width: 33%; 
    height: 33%; 
} 

.circle { 

    width: 100%; 

    height:0; 
    padding-bottom: 100%; 
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%; 
    background: #4679BD; 

}

的index.html

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <link rel="stylesheet" type="text/css" href="estils.css"> 

    </head> 
    <body> 


     <div class="Table"> 
      <div class="Row"> 
      <div class="Cell" >eeee</div> 
       <div class="Cell" >aaaaa</div> 
       <div class="Cell" >iiii</div>  
      </div> 
      <div class="Row"> 
       <div class="Cell" >eeee</div> 
       <div class="Cell" >aaaaa</div> 
       <div class="Cell" >iiii</div> 
      </div> 
       <div class="Row"> 
        <div class="Cell" > 
         <div class="circle" ></div> 
        </div> 
        <div class="Cell" > 
         <div class="circle" ></div> 
        </div> 
        <div class="Cell" > 
         <div class="circle" ></div> 
        </div> 
      </div> 

     </div> 

    </body> 
<html>

來源

2015-10-12 strok_777

您可能想要使用media-queries。

@media (min-width: 1000px) 
.circle { 
    width: 100px; 
    height: 100px; 
    display: block; 
    margin: 0 auto; 
    padding: 0; 
}

會做的伎倆。但@media (max-width: 1000px)取決於瀏覽器窗口的寬度。

來源

2015-10-12 06:17:39

回答

相關問題