CSSを使用して画像の幅に応じてボタンの幅を設定するには

Question

ここにはcurrentlyのコードがあります。私は、ボタンをリサイズ時に応答する画像の幅に広げようとしています。今のところ、サイズを変更すると、イメージの位置を維持する代わりに、サイズのほぼ半分が縮小されます。これはjQueryの質問かもしれませんが、私は完全にはわかりません。

HTML

<div class="container"> 
     <div class="row"> 
      <div class="img-box col-lg-12 text-center"> 
       <button type="button" class="btn btn-lg btn-primary" onclick="window.location='beginReservation.php'">Book Seat Now</button><br> 
       <img class="bg img-responsive img-center" src="images/homepage.jpg" alt="Book Seat"> 
      </div> 
     </div> 
    </div> 

CSS

.img-box { 
    background: white; 
    margin-bottom: 20px; 
    padding: 0px; 
    display:inline-block; 
    } 

    .btn { 
     background: rgb(179,0,14); 
     border: rgb(179,0,14); 
     padding: 0.5% 32.75%; 
     border-radius: 0px; 
     margin:0 auto;  
    } 

    .bg { 
    margin:0 auto; 
    } 

Answer 1

削除表示：このクラスからインラインブロックは.img-box{}