html - img-circle 超出边距

Question

我创建了一个 img-circle 放置在与一段文本相同的 row 上，使用两个 .col-xs-6, 但我的图像溢出了 container 的边缘。

我曾尝试将 padding 更改为 0，但这没有用。

我目前没有为 img-circle 设置任何 CSS 样式。

<div class="container about">
     <div class="row">
          <div class="col-xs-6">
                 <p class="hello">Hello,</p>
          </div>
      </div>
      <div class="row">
            <div class="col-xs-6">
                 <p class="intro">text from paragraph here</p>
            </div>
            <div class="col-xs-6">
                 <img class="profile-pic img-circle" src="#"/> 
            </div>
      </div>

Answer 1

您需要在 img 中使用类 .img-responsive，参见 Bootstrap Docs

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container about">
  <div class="row">
    <div class="col-xs-6">
      <p class="hello">Hello,</p>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6">
      <p class="intro">text from paragraph here</p>
    </div>
    <div class="col-xs-6">
      <img class="profile-pic img-circle img-responsive" src="//lorempixel.com/1000/1000" />
    </div>
  </div>
</div>