如何使用CSS根據圖像的寬度響應地設置按鈕的寬度

以下是我的currently以下代碼。我試圖讓按鈕在調整大小時跨越響應圖像的寬度。現在它縮小几乎一半的大小時，調整大小，而不是保持與圖像對齊。這可能是一個jQuery問題，我不完全確定。如何使用CSS根據圖像的寬度響應地設置按鈕的寬度

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; 
    }

來源

2017-07-06 Kelly

如果你的形象是它的寬度爲100％的集裝箱只需要設置按鈕的寬度爲100 ％ – Huangism

@黃色和比例尺它的父母（img盒子）到你想要的寬度 –

@DerkJanSpeelman我會想象寬度是採取ca使用'col-lg-12'參考 – Huangism

刪除顯示：從這個類inline-block的.img-box{}

來源

2017-07-06 17:50:37

如何使用CSS根據圖像的寬度響應地設置按鈕的寬度

回答

相關問題