如何使用CSS根据图像的宽度响应设置按钮的宽度答案

【问题标题】：How to responsively set width of button according to the width of the image using CSS如何使用CSS根据图像的宽度响应设置按钮的宽度
【发布时间】：2017-07-06 17:46:31
【问题描述】：

这是我所拥有的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; 
   }

【问题讨论】：

如果您的图片是其容器的 100% 宽度，那么只需将按钮宽度设置为 100%
@Huangism 然后将它的父级（img-box）缩放到你想要的宽度
@DerkJanSpeelman 我想宽度是由col-lg-12处理的
导航栏参考引导文档getbootstrap.com/components/#navbar
@Kelly 你正在制作 .img-box 来显示：inline-block;删除该规则并尝试一下。

标签： jquery css twitter-bootstrap-3

【解决方案1】：

从这个类中删除 display:inline-block .img-box{}

【讨论】：