Question

我正在玩一个html网页。你们中的任何人都可以帮助我理解为什么我的图像将容器边界扩展到右边吗？ https://codepen.io/Braindead16/pen/gRPZxe 点击链接查看完整代码，看看我对图片的意义。

<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>

我尝试将类应用于具有display：block的图像;和保证金：0自动; 我也试过将引导列应用于图像及其div，但没有任何东西使图像成为中心。

Answer 1

默认情况下img 宽度和高度设置为auto并使用图片的真实宽度/高度

解决方案：

将宽度设置为100％（这是父宽度的100％）将缩放图像适合div容器。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

图像扩展了我的容器边界

1 个答案: