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;
}