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

Question

I am using a container with a row construct to make a header. I would like for the leftmost column to have an image. However, whenever I add an image it gets added full sized. I would like it to be limited to the set size of that column.

This is my current HTML code:

 .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> 

I tried adding the in my CSS file but it did not change anything.

How can I have it such that the image follows the set size of the container?

Answer 1

尝试添加以下CSS：

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

Answer 2

The image is taking the full size of the col-xs-1 column. Just it is taking padding from left and right which all col- classes have.

If you want to make image a little bigger, then define its height (or width any one ) in px.

like the below:

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