Круг оставаться неподвижным при изменении размера окна

Я делаю простой сайт с html и CSS, и я сделал круг div. Когда я изменяю размер браузера, он растягивается больше в одном направлении, чем другой. Возможно ли, чтобы он оставался идеальным кругом? Если да, то как?Круг оставаться неподвижным при изменении размера окна

Прямо сейчас, это код для круга:

#circle 
{ 
border-radius: 100%; 
-webkit-border-radius: 100%; 
-moz-border-radius: 100%; 
background-color: #B64926; 
width: 60%; 
height: 60%; 
max-width: 70%; 
max-height: 70%; 
min-width: 30%; 
min-height: 30%; 
display: block; 
position: fixed; 
text-align: center; 
}

источник

2013-06-19 Anonymous

Вы можете вручную установить высоту и ширину DIV, как:

<html> 
<style> 
.circle { 
     height: 20px; 
     width: 20px; 
     background: red; 
     border-radius: 100%; 
} 
</style> 
<body><div class="circle"></div></body> 
</html>

источник

2013-06-19 19:24:05 Harry

Да, но я хотел бы процент, поэтому размер будет относиться к разрешению человека, просматривающего страницу. Я добавил код сейчас. –

Попробуйте полный пример:

<html> 

    <head> 

     <style> 
     #circle 
      { 
      border-radius: 100%; 
      -webkit-border-radius: 100%; 
      -moz-border-radius: 100%; 
      background-color: #B64926; 
      height: 60%; 
      max-height: 70%; 
      min-height: 30%; 
      display: block; 
      position: fixed; 
      text-align: center; 
      } 
     </style> 

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 

     <script type="text/javascript"> 
      $(document).ready(function() {  
       $(window).resize(
        function(){     
         $('#circle').width($('#circle').height()); 
        } 
       ); 

       $(window).resize(); 

      }); 
     </script> 

    </head> 

    <body> 

     <div id="circle"></div> 

    </body> 

</html>

источник

2013-06-19 21:24:01

Спасибо за это, но я намерен сохранить его в html и css! Пока у меня есть index.html и stylesheet.css, и я стараюсь, чтобы это было просто: –

Круг оставаться неподвижным при изменении размера окна

ответ

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