css - 响应式 Bootstrap Logo 图像

Question

我的 Logo 图像在移动设备上看起来像这样:

我希望它自动变小，所以我添加了这个 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

如果你想让你的图像通过 bootstrap 响应，你必须直接在图像中应用类

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