How do I ensure the max width of an image when using bootstrap 3?

Using bootstrap 3, I want the article page to display images of all sizes, both responsive and within the bounds of the article. Here is the html:

<div class="col-sm-8">
    <div class="article">

    <h3 class="title">{{ post.title }}</h3> <ul class="list-inline list-unstyled">
        {% if %}
            <li class="author">wrote<b>
                    {{ }} </b>
        {% endif %}

        <li class="pubdate">{{ post.pub_date |date:'Y m d' }}


     <div class="img-responsive headimage"> <img src="/media/{{post.headimage}}" />

        <div class="open-sans">{{ post.body }}</div>



and css:

.headimage img {

    max-width: 700px;
    padding: 1em;


This limitation is max-width, however, the hacky image is unresponsive. So I would like to know how to do it correctly.


source to share

1 answer

To prevent an image overflow in a column:

.headimage {
  max-width: 100%;
  padding: 1em;

.headimage > img {
  width: 100%;




All Articles