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?
尝试添加以下CSS:
.image-container .logo{ width:100%; }
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.