使用 bootstrap 3 时如何强制图像最大宽度？

Question

使用bootstrap 3，我想要一个文章页面显示各种尺寸的图像，既响应又不超过文章边界。这是 html:

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

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

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


    </ul>


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

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

    </div>
</div>

和css：

.headimage img {

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

这限制了最大宽度但是图像没有响应是老掉牙的。所以我想知道如何以正确的方式做到这一点。

Answer 1

防止图片溢出栏目：

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

.headimage > img {
  width: 100%;
}

使用 bootstrap 3 时如何强制图像最大宽度？

How to enforce image max-width when using bootstrap 3?

html

css

twitter-bootstrap-3