如何使用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根据图像的宽度响应地设置按钮的宽度

回答

相关问题