Масштабировать HTML-страницу на основе размера браузера

Question

Я пытаюсь создать страницу, которая должна работать на любом размере браузера и масштабироваться соответствующим образом. Я использую фреймворк bootstrap на данный момент, но я не привязан к нему, если что-то лучше.

Идея заключается в том, что это исследование удовлетворенности клиентов, которые будут заполнены на планшетных ПК, и он не может прокручивать и т.д.

На данный момент у меня есть HTML как:

<div class="row"> 
    <div class="col-lg-12"> 
     <h1>How are we doing?</h1> 
    </div> 
</div> 
<div class="col-lg-12"> 
    <div class="panel panel-primary"> 
     <div class="panel-heading"> 
      <h3 class="panel-title">How was the cleanliness today?</h3> 
     </div> 
     <div class="panel-body"> 
      <center> 
       <div class="col-xs-2"><img src="img/5.png" alt="" class="img-responsive"></div> 
       <div class="col-xs-2"><img src="img/4.png" alt="" class="img-responsive"></div> 
       <div class="col-xs-2"><img src="img/3.png" alt="" class="img-responsive"></div> 
       <div class="col-xs-2"><img src="img/2.png" alt="" class="img-responsive"></div> 
       <div class="col-xs-2"><img src="img/1.png" alt="" class="img-responsive"></div> 
      </center> 
     </div> 
    </div> 
</div> 

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

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

Я хотел бы, чтобы это выглядело, как (очевидно, не искаженная, плохой MSPaint работа):

Answer 1

Вашего <div class="panel-body"> содержит 1 ребенок, и это center и там для вашего другие <div class="panel-body"> детей становятся как паршивое лицо избавиться от center тега

<div class="row"> 
    <div class="col-lg-12"> 
     <h1>How are we doing?</h1> 
    </div> 
</div> 
<div class="col-lg-12"> 
    <div class="panel panel-primary"> 
     <div class="panel-heading"> 
      <h3 class="panel-title">How was the cleanliness today?</h3> 
     </div> 
     <div class="panel-body"> 

   <div class="col-xs-2"><img src="img/5.png" alt="" class="img-responsive"></div> 
       <div class="col-xs-2"><img src="img/4.png" alt="" class="img-responsive"></div> 
       <div class="col-xs-2"><img src="img/3.png" alt="" class="img-responsive"></div> 
       <div class="col-xs-2"><img src="img/2.png" alt="" class="img-responsive"></div> 
       <div class="col-xs-2"><img src="img/1.png" alt="" class="img-responsive"></div> 

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

Вы должны следовать примеру из Bootstrap#Panels
и если вы хотите добавить теги там быть подготовлены он будет действовать иной

EDIT: Также посмотрите, какая у вас сетка (полная ширина) или .container-fluid (полная ширина) Bootstrap#Grid