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:
<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>
and the css:
.headimage img {
max-width: 700px;
padding: 1em;
}
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.
To prevent the image from overflowing the column:
.headimage {
max-width: 100%;
padding: 1em;
}
.headimage > img {
width: 100%;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.