title: How to enforce image max-width when using bootstrap 3?
body: <p>Using bootstrap 3, I want an article page to show images of all sizes both responsive and not exceed the article boundaries. Here is the html:</p>
  
  <pre><code>&lt;div class="col-sm-8"&gt;
      &lt;div class="article"&gt;
  
      &lt;h3 class="title"&gt;{{ post.title }}&lt;/h3&gt; &lt;ul class="list-inline list-unstyled"&gt;
          {% if post.author %}
              &lt;li class="author"&gt;wrote&lt;b&gt;
                      {{ post.author }} &lt;/b&gt;
              &lt;/li&gt;
          {% endif %}
  
          &lt;li class="pubdate"&gt;{{ post.pub_date |date:'Y m d' }}
      &lt;/li&gt;
  
  
      &lt;/ul&gt;
  
  
       &lt;div class="img-responsive headimage"&gt; &lt;img src="/media/{{post.headimage}}" /&gt;
       &lt;/div&gt;
  
          &lt;div class="open-sans"&gt;{{ post.body }}&lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the css:</p>
  
  <pre><code>.headimage img {
  
      max-width: 700px;
      padding: 1em;
  }
  </code></pre>
  
  <p>This limit the max-width however is hackish the image is not responsive. So I'd like to know how to do it in correct way. </p>