2016-11-14 118 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塊引用。