HTML Bootstrap 将图像放入行内的列中

Question

我正在使用带有行结构的容器来制作标题。我希望最左边的列有一个图像。但是，每当我添加图像时，它都会以全尺寸添加。我希望它限于该列的设定大小。

这是我当前的 HTML 代码:

.logo {
  max-width: 100%;
  max-height: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron" >
  <div class="container">
    <div class="row">
      <div class="col-xs-1">
        <div class="image-container">
          <center>
            <img src="https://i.pinimg.com/originals/fb/76/5b/fb765b8752d50de50cfa15203f9a7acd.png" alt="test" class="logo">
          </center>
        </div>
      </div>

      <div class="col-xs-10">
        <h2><center>TEST HEADER</center></h2>      
        <h4><center>TEST SUBTEXT</center></h4>
      </div>

      <div class="col-xs-1">
        <center>wowow</center>
     </div>

   </div>
  </div>
</div>

我尝试在我的 CSS 文件中添加，但它没有改变任何东西。

我怎样才能使图像遵循容器的设置大小？

Answer 1

尝试添加以下 css:

.image-container .logo{ 宽度:100%； }