Reputation: 11
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
Reputation: 11342
By default
img
width and height are set toauto
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