title: Displaying small responsive images with Bootstrap
body: <p>I'm working on a small social network king of thing and I'm struggling to display the user's profile pic along with his/her posts. </p>
  
  <p>This is what I have now:</p>
  
  <p><a href="https://i.stack.imgur.com/HZWqQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HZWqQ.png" alt="enter image description here"></a></p>
  
  <p>The problem is the profile's pic on the left side. First off, the "Xmas sucks..." text has been pushed down by the image (I suspect this requires the <em>clearfix</em> class to be fixed - problem is I couldn't get it working). Secondly, if the screen size changes, the image overflows (I think that's the term) the column width:</p>
  
  <p><a href="https://i.stack.imgur.com/WGCFq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WGCFq.png" alt="enter image description here"></a></p>
  
  <p>You can see above (IPhone 6 Plus) that the "@grinch..." line has been pushed down. </p>
  
  <p>That's my code:</p>
  
  <pre><code>&lt;div ng-repeat="post in posts | orderBy:'+':true"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-12"&gt;
        &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading line-break" ng-if="post.title"&gt;
            &lt;strong&gt;{{post.title}}&lt;/strong&gt;
          &lt;/div&gt;
          &lt;div class="panel-body line-break"&gt;
            &lt;div class="row small-gap-row-below"&gt;
              &lt;div class="col-md-1"&gt;
                &lt;img src='http://localhost:50003/image/{{user.profilePicKey}}'
                     alt="Profile Picture" class="img-responsive img-rounded"
                     style="max-height: 50px; max-width: 50px;"&gt;
              &lt;/div&gt;
              &lt;div class="col-md-11"&gt;
                  &lt;span&gt;&lt;strong&gt;@{{post.username}}&lt;/strong&gt;&lt;/span&gt;
                  &lt;small class="pull-right"&gt;18-May-2016 - 16:02&lt;/small&gt;
                &lt;hr class="small-margin-top"&gt;&lt;/hr&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="row"&gt;
              &lt;div class="col-md-offset-1 col-md-11"&gt;
                &lt;p froala-view="post.content"&gt;&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As I'm using the <em>img-responsive</em> class, shouldn't the image be automatically resized to fit the parent? In which case, it shouldn't overflow?</p>
  
  <p>I'm setting <em>style="max-height: 50px; max-width: 50px;"</em> because otherwise  the displayed image is very small. As it says 'max-*' I'm supposing this shouldn't break responsiveness because it still is a "flexible" measure. </p>
  
  <p>I suspect it's not rocket science to get this working but as I'm not experience with CSS/Bootstrap/Frontend-in-general I'm having a hard time. </p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I've changed col-md-* to col-xs as suggested but it didn't work:</p>
  
  <p><a href="https://i.stack.imgur.com/MPufB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MPufB.png" alt="enter image description here"></a></p>
  
  <p>The username was placed on top of the image. </p>
  
  <p><strong>UPDATE II</strong></p>
  
  <p>Img CSS:</p>
  
  <pre><code>element.style {
      max-height: 50px;
      max-width: 50px;
  }
  .img-rounded {
      border-radius: 6px;
  }
  .carousel-inner&gt;.item&gt;a&gt;img, .carousel-inner&gt;.item&gt;img, .img-responsive, .thumbnail a&gt;img, .thumbnail&gt;img {
      display: block;
      max-width: 100%; (not applied!)
      height: auto;
  }
  
  img {
      vertical-align: middle;
  }
  img {
      border: 0;
  }
  * {
      -webkit-box-sizing: border-box; (not applied!)
      -moz-box-sizing: border-box; (not applied!)
      box-sizing: border-box;
  }
  Inherited from body.ng-scope
  body {
      font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
      font-size: 14px;
      line-height: 1.42857143;
      color: #333;
      background-color: #fff;
  }
  Inherited from html
  html {
      font-size: 10px; (not applied!)
      -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  html {
      font-family: sans-serif; (not applied!)
      -webkit-text-size-adjust: 100%; (not applied!)
      -ms-text-size-adjust: 100%;
  }
  Pseudo ::before element
  :after, :before {
      -webkit-box-sizing: border-box; (not applied!)
      -moz-box-sizing: border-box; (not applied!)
      box-sizing: border-box;
  }
  Pseudo ::after element
  :after, :before {
      -webkit-box-sizing: border-box; (not applied!)
      -moz-box-sizing: border-box; (not applied!)
      box-sizing: border-box;
  }
  </code></pre>
  
  <p><strong>UPDATE III</strong></p>
  
  <p>Using col-xs-* along with col-sm-* as suggested:</p>
  
  <p><a href="https://i.stack.imgur.com/wib3q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wib3q.png" alt="enter image description here"></a></p>
  
  <p>A gap between the profile pic and the username (@grinch) appeared. Also the post content has been pushed to the left. </p>