Resizing images in Bootstrap - html

Question

Been reading about general answers for this for a while. As often as I have tried to play with it, I just cannot get the CSS to work and fit on my timeline.
I am using this theme. I have been trying to replace the about section timeline with pictures of my own but the pictures I have used are all different sizes. I just can't seem to get even one of my images to fit the fun little circle that the originals were in and trust me it has been a long time. Any help is REALLY appreciated. I'll put the code I have below but I know some of it repeats itself because like I said, I have been trying to fix these images for a while. I've tried to make different CSS rules for each individual image but I have failed on that part as well. Seriously any help is appreciated.
<section id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">About</h2>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul class="timeline">
<li>
<div class="timeline-image">
<img class="img-circle img-responsive1" src="img/about/1.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="subheading">Build or Scale your HR Capability</h4>
</div>
<div class="timeline-body">
<p class="text-muted">Properly staffed and positioned Human Resources leaders and teams are strategic enablers of business performance and growth. We help you assess your current HR capabilities and build value adding talent management solutions that will help you move beyond compliance driven personnel management to business integrated Human Resources leadership.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<img class="img-circle img-responsive1" src="img/about/2.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="subheading">Develop your Leaders</h4>
</div>
<div class="timeline-body">
<p class="text-muted">Effective leadership is critical to attracting, engaging, and retaining the people you need to delight your customers and achieve your goals. We help you leverage the strengths of your managers and create insights and actions to develop their weaknesses through individualized feedback and coaching.</p>
</div>
</div>
</li>
<li>
<div class="timeline-image">
<img class="img-circle img-responsive1" src="img/about/3.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="subheading">Focus and Engage your Team</h4>
</div>
<div class="timeline-body">
<p class="text-muted">The most successful businesses have team members that understand the company's goals and are committed to achieving them. We help you create clarity of purpose and establish goal setting and performance management tools and processes that go beyond score keeping to create a culture of engagement. </p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<h4>Be Part
<br>Of Our
<br>Story!</h4>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
and the css for the images
element {
}
.img-circle {
border-radius: 50%;
}
.img-responsive {
display: block;
max-width: 50%;
height: auto;
}
img {
vertical-align: middle;
}
img {
border: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Important to note, I think checking the link earlier would really help me. There are a series of CSS rules that also are extended onto the image as you can see from the HTML like timeline-image which I can also put here but I figured my question was long enough.
Thanks for any and all help.

Answer 1

First, make sure you are using the correct classname, img-responsive, currently in your html code, you are using img-responsive1 for your img elements.
after that, in your css change the max-width of img-responsive class to 100%
.img-responsive {
max-width: 100%;
height: auto;
}
to make sure that the image will fit to its container.

Answer 2

You can use this for you are image (whitout use bootstrap) :
img {
display: block;
max-width: 100%;
height: auto;
}
You can use it for one image like this :
#image_id {
display: block;
max-width: 100%;
height: auto;
}
note : we don't need bootstrap to do this.but if you want to tey with bootstrap you can do like this :
<div class="row">
<div class="col-md-4">
<img class="thumbnail img-responsive" src="h.jpg" />
</div>
</div>