2016-11-14 36 views
0

如何确保添加到tumblr文本文章的照片不会超出文章背景?
我想确保无论照片在reblog链中的哪个位置,照片仍将位于背景中。

为我的文字后的HTML是:如何在帖子边界内的tumblr文字帖中保留照片?

{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; 

回答

1
.text img { 
    max-width: 100%; 
    height: auto;} 

这应该修复它。图像将缩小以适应reblog块引用。