img-circle, выходящий за пределы поля

Question

Я создал img-circle, который будет размещен на том же row в качестве абзаца текста, используя два .col-xs-6,, но мое изображение разливается по краю container.

Я попытался изменить padding на 0, но это не сработало.

У меня нет стиля CSS для img-circle.

<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-responsive в img см Bootstrap Docs

Изображение в Bootstrap 3 может быть переделано людьми путем добавления из .img-responsive класса. Это относится к max-width: 100%;, height: auto; и display: block; к изображению, чтобы оно красиво окрашивалось в родительский элемент.

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