图片扩展了我的容器边界

我只是在玩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>

我已经尝试将类应用于具有显示的图像：block;和余量：0自动; 我也尝试将自举列应用到图像和它的div，但没有任何东西使图像中心。

来源

2017-06-12 Simon

您*必须*发布所有的代码中的问题 –

如果你在最近的引导，引导4，'IMG-responsive'类成为'IMG-fluid' ，但那只会给你一个img它的父母的全部宽度。 https://v4-alpha.getbootstrap.com/content/images/ – marcx

快速向你的img上的codepen应用内联样式'max-width：100％'解决了这个问题，它应该与bootstrap的'img-流体' – marcx

默认img宽度和高度被设置为auto和使用该图像的真实宽度/高度

解决方案：

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

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>

来源

2017-06-13 00:02:06

建议您将所有样式移动到CSS .... +'height：auto;'也是多余的... –

@GalRatzkin感谢提示，更新。我只是复制了OP的codepen，所以这些样式是分开的。 = D –

我很感谢回复和帮助。之后我设法解决了一个问题。我想我给容器应用了一个宽度的auto，并且将一个类“image-center”应用于包含具有属性display：block和margin：auto的图片的div。 – Simon

图片扩展了我的容器边界

回答

相关问题