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{ width:100%; }

Answer 2

图像采用col-xs-1列的完整大小。只是从左右两边填充所有的队员。

如果你想让图像更大一点，那么在px中定义它的高度（或任何宽度）。

如下所示：

.image-container .logo {
width: 100px;
}

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

2 个答案: