如何确保添加到tumblr文字帖子的照片不会超出帖子的背景?
我想确保无论照片在reblog链中的哪个地方,照片仍然会在背景中。
我的文章的html是:
{block:Text}
<div class="text">
{block:Title}
<h3>
<a href="{Permalink}">{Title}</a>
</h3>
{/block:Title}
{Body}
<ul class="like-reblog">
<li>{LikeButton color="white"}</li>
<li>{ReblogButton color="white"}</li>
<li>{block:NoteCount}<a href="{Permalink}#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
<li>{block:Date}<a href="{Permalink}">{Month} {DayOfMonth}</a>{/block:Date}</li>
</ul>
<ul class="tags">
<li>{block:HasTags}{block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}{/block:HasTags}
</ul>
</div>
{block:PostNotes}{PostNotes}{/block:PostNotes}
{/block:Text}
我的文章帖子的css是:
.text {
background: rgba(251, 230, 202, 1);
margin: 40px auto;
padding: 20px;
width: 500px;
border: 2px solid #fff;
background-position:center;
}
.text a {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-weight: normal;
color: rgb(52, 47, 20);
text-decoration: none;
}
.text img {
max-width: 400px;
height: auto;
}
.text blockquote{
border-left: 3px solid #fff;
padding: 0px 10px;
答案 0 :(得分:1)
.text img {
max-width: 100%;
height: auto;}
这应该解决它。图像将缩小以适应reblog块引用。