CODEWITHSUNDEEP
html
Simon
Simon

Reputation: 11

Image extends my container boundaries

I'm just playing around with a html webpage. Can any of you guys help me understand why my image is extending the container boundaries to the right? https://codepen.io/Braindead16/pen/gRPZxe click link for full code and to see what I mean about the image.

<div class="container">
<div class="jumbotron">
 <h1 class="text-center"><em>Title</em></h1>
<div class="text-center image-box">
   <img class="text-center img-responsive border" 
src="https://www.sitebuilderreport.com/assets/facebook-stock-up-
446fff24fb11820517c520c4a5a4c032.jpg" alt="whatever">
<h2 class="image-text">this text decribes the image</h2>
</div>

I have tried applying a class to the image that has display: block; and margin: 0 auto; I've also tried applying bootstrap columns to the image and its div, but nothing has made the image central.

Upvotes: 1

Views: 398

Answers (1)

Dalin Huang
Dalin Huang

Reputation: 11342

By default img width and height are set to auto and using the true width/height of the image

Solution:

set the width to 100% (which is 100% of the parent width) will scale the image to fit into the div container.

body {
  margin-top: 30px;
}

.title-img {
  width: 100%;
}

.image-text {
  color: grey;
  font-style: italic;
  font-size: 20px;
}

.border {
  border-style: solid;
  border-color: grey;
  border-width: 2px;
  border-radius: 5px;
}

.image-box {
  background-color: rgb(170, 170, 256);
  padding: 10px;
  border-radius: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <div class="container">
    <div class="jumbotron">
      <h1 class="text-center"><em>Title</em></h1>
      <div class="text-center image-box">
        <img class="text-center img-responsive border title-img" src="https://www.sitebuilderreport.com/assets/facebook-stock-up-446fff24fb11820517c520c4a5a4c032.jpg" alt="whatever">
        <h2 class="image-text">this text decribes the image</h2>
      </div>
      <div class="row">
        <div class="col-xs-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2">
          <h3>time-line or info</h3>
          <ul>
            <li>point 1</li>
            <li>point 2</li>
            <li>point 3</li>
            <li>point 4</li>
            <li>Depending on how much writing I have in these points effects how much I'd offset them. For points around this length this offset works.</li>
            <div class="col-xs-12 col-sm-6 offset-sm-3 col-md-4 offset-md-4">
              <li>Shorter Points</li>
              <li>More central</li>
          </ul>
          </div>
          <p>Wow, what a load of useless info. If you want more click <a href="blank" target="_blank">here</a>
        </div>
      </div>
    </div>
</body>
<p class="text-center">dis page is coded by me</p>

Upvotes: 1

Related Questions