Изменить размер круга

Я пытаюсь создать таблицу div с ячейками. Внутри я хотел бы добавить еще один div, который имеет форму круга. Проблема, которую я пытаюсь решить, заключается в том, что я хотел бы, чтобы при изменении размера окна браузера окружность div адаптировалась к нему и сохранила пропорцию.Изменить размер круга

Как вы можете видеть в изображениях, когда я уменьшаю размер окна, размер круга - это нормально, но когда в окне это нормальный размер, циркуль слишком большой, и я не знаю, как его ограничить ,

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

Изменить размер круга

ответ

Смежные вопросы