[英]How to enforce image max-width when using bootstrap 3?
使用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;
}
然而,這限制了最大寬度是圖像無響應的黑客。 所以我想知道如何以正確的方式做到這一點。
要防止圖像溢出列:
.headimage {
max-width: 100%;
padding: 1em;
}
.headimage > img {
width: 100%;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.