Создание окружностей, отвечающих ширине экрана

Question

Я создал некоторый html, который является отзывчивым, но им трудно заставить круги реагировать на размер экрана.

Я хочу, чтобы круги уменьшались, когда экран уменьшался в размере.

вот мой Fiddle, чтобы показать мой рабочий

<div class="container"> 
     <div class="col-lg-12 image-container"> 
      <div class="left"> 
       <a href="#"><img src="img/cover2.jpg" alt="Cover 1"></a> 
      </div> 
      <div class="center"> 
        <button type="button" class="btn btn-default btn-lg arrow-left"> 
         <span class="glyphicon glyphicon-chevron-left"></span> 
        </button> 
        <button type="button" class="btn btn-default btn-lg arrow-right"> 
         <span class="glyphicon glyphicon-chevron-right"></span> 
        </button> 
        <a href="#"><img src="img/cover1.jpg" alt="Cover 1"></a> 
      </div> 
      <div class="right"> 
        <a href="#"><img src="img/cover3.jpg" alt="Cover 1"></a> 
      </div> 

     </div> 

     <div class="row"> 
      <div class="col-md-6 col-md-offset-3"> 
       <div class="information-wrap"> 
        <h1>Issue Number:</h1> 
        <h2>Information about Magazine</h2> 
        <h3>More information..</h3> 
       </div> 
       <div class="more-info-wrap"> 
         <a class="btn btn-primary btn-large magazine-open">Open</a> 
       </div> 


      </div> 
     </div> 

Answer 1

Вы можете установить width и height окружностей в процентах.

Кроме того, чтобы держать круги в середине, вы можете использовать отрицательные проценты для left и right свойств, а именно:

.arrow-right{ 
    position: absolute; 
    top: 45%; 
    right: -10%; /* <-- keep the circle center horizontally */ 
    width: 20%; /* <-- Set the width by percentage */ 
    height: 20%; /* <-- Set the height by percentage */ 
    border-radius: 50%; 
    box-shadow: 1px -1px 28px 5px rgba(0,0,0,0.75); 
} 

.arrow-left{ 
    position: absolute; 
    top: 45%; 
    left: -10%; /* <-- keep the circle center horizontally */ 
    width: 20%; /* <-- Set the width by percentage */ 
    height: 20%; /* <-- Set the height by percentage */ 
    border-radius: 50%; 
    box-shadow: 1px -1px 28px 5px rgba(0,0,0,0.75); 
} 

JSFiddle Demo.

Answer 2

изменение height и width к percentages

.arrow-right,.arrow-left{ 
height:34%; 
width:34%; 
} 

работает fiddle