响应Bootstrap徽标图像

Question

我的徽标图片在移动设备上显示如下：

我希望它自动变小，所以我添加了这个css：

img {
  display: inline-block;
  height: auto;
  max-width: 100%;

 <div class="container">

    <div class="row">
        <div class="col-lg-12 text-center img-responsive">
            <img src="http://placehold.it/600x140" alt="logo" style="margin-bottom: 30px;" />

        </div>

但它不起作用，有人可以帮助我吗？

Answer 1

如果您希望图像响应自举，则必须直接在图像中应用该类

<img class="img-responsive" src="http://placehold.it/600x140" alt="logo" style="margin-bottom: 30px;" />