CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Kurt Peek
Kurt Peek

Reputation: 57451

How to avoid part of an image falling outside the window with Bootstrap

On the site www.peek.solutions, I'm trying to improve the layout of the image in the "About" section. Right now I notice that part of the image is out of view when I open the site with the default window size (see screenshot below). However, I would like instead to wrap the text on the left a bit more and leave the whole image visible. How might I achieve this?

enter image description here

Here is the code which controls this <div>.

<!-- Container (About Section) -->
<div id="about" class="container-fluid">
  <div class="row">
    <div class="col-sm-8">
      <h2>About us</h2><br>
      <h4>Peek Solutions, an independent consulting company founded by Ralf Peek, provides pipeline integrity solutions and assurance support to the energy industry, including the application of structural reliability methods to assess and ensure integrity.</h4><br>
      <br>
      <a href="#contact" class="btn btn-default btn-lg" role="button">Get in touch</a>
    </div>
    <div class="col-sm-4">
      <img src="img/ZRB_buckle_trigger_resized_30_percent.jpg"></img>
    </div>
  </div>
</div>

I was thinking of changing the 8-4 ratio to 6-6, but this would not ensure that the image is always fully visible. Is there a better way to do this?

Upvotes: 0

Views: 313

Answers (3)

Geoff Taylor
Geoff Taylor

Reputation: 524

Adding the class="img-responsive" to your img tag will fix your problem. It's a Bootstrap class that scale the image to the parent container without changing the aspect ratio.

Upvotes: 1

Amit Kumar Singh
Amit Kumar Singh

Reputation: 4475

Add

class="img-responsive"

to image

Upvotes: 1

Sumith Chalil
Sumith Chalil

Reputation: 358

Specify the width inside image tag . <img src="source" style="width:100%" />

Upvotes: 1

Related Questions