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

Answer 2

该图像采用col-xs-1列的完整大小。 只是从左到右填充所有类。

如果要使图像更大一点，则以px为单位定义其高度（或宽度）。

如下所示：

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