1. 首頁
  2. 問答
  3. 響應式設計圖像縮放（tumblr主題）

響應式設計圖像縮放（tumblr主題）

2016-01-24 84 views
1

道歉爲一個可能很簡單的問題。到目前爲止，我已經非常直觀地瀏覽HTML和CSS，並按需要搜索，但我已經達到了一個混亂的地步。響應式設計圖像縮放（tumblr主題）

我想編輯我的主題，以便女主角的圖像與側欄like so重疊。我想讓圖片在放大/縮小時與其他博客進行比例縮放，並以不同的分辨率保留在側欄上。

我一直在試圖複製代碼here來實現這一目標，但我仍然遇到問題，實際上是通過側邊欄來擴展它。它也不會與側欄重疊（側欄覆蓋它）。

我編輯過的主題至今：

<!DOCTYPE html> <html> <head> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <title>{Title}</title> 
    <link rel="shortcut icon" href="{Favicon}"> 
    <link rel="alternate" type="application/rss+xml" href="{RSS}"> 
    {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description} 

<!-- 

——————————————————————————————————————— 
|          | 
|  THEME 2 BY BROOK SPACEGRLL  | 
| please do not remove credit!!!  | 
| do not use this code as a base  | 
|  for your own themes!!   | 
|          | 
——————————————————————————————————————— 

           --> 

<meta name="image:Sidebar Image" content="" /> 
<meta name="image:Background Image" content="" /> 
<meta name="image:floaty" content="" /> 
<meta name="if:Repeating Background" content="0" /> 
<meta name="if:Solid Background" content="1" /> 
<meta name="color:Background" content="#ffffff" /> 
<meta name="color:Post Background" content="#ffffff" /> 
<meta name="color:Scrollbar Background" content="#ffffff" /> 
<meta name="color:Text" content="#000000" /> 
<meta name="color:Borders" content="#474747" /> 
<meta name="color:Link" content="#333333" /> 
<meta name="color:Link Hover" content="#a5a5a5" /> 
<meta name="color:Blockquote" content="#000000" /> 
<meta name="color:Scrollbar" content="#dadada" /> 
<meta name="color:Shadow" content="#e2e2e2" /> 
<meta name="color:Hover Highlight" content="#ffffcb" /> 
<meta name="select:Font" content="Consolas" /> 
<meta name="select:Font" content="Inconsolata" /> 
<meta name="select:Font" content="Century Gothic" /> 
<meta name="select:Font" content="Lucida Console" /> 
<meta name="select:Font" content="Trebuchet MS" /> 
<meta name="select:Font" content="MS Gothic" /> 
<meta name="select:Font" content="Calibri" /> 
<meta name="select:Font" content="Tahoma" /> 
<meta name="select:Font" content="Arial" /> 
<meta name="select:Font" content="Helvetica" /> 
<meta name="if:250px" content="0" /> 
<meta name="if:400px" content="0" /> 
<meta name="if:500px" content="1" /> 
<meta name="if:Sidebar Image" content="1" /> 
<meta name="if:Translucent Post BG" content="0" /> 
<meta name="if:Right Sidebar" content="0" /> 
<meta name="if:Tiny Cursor" content="0" /> 
<meta name="if:Drop Down Nav" content="1" /> 
<meta name="if:Shadow" content="1"/> 
<meta name="if:Show Source Via" content="0" /> 
<meta name="text:Home Title" content="home" /> 
<meta name="text:Nav Title" content="navigation" /> 
<meta name="text:Link 1 URL" content="" /> 
<meta name="text:Link 1" content="" /> 
<meta name="text:Link 2 URL" content="" /> 
<meta name="text:Link 2" content="" /> 
<meta name="text:Link 3 URL" content="" /> 
<meta name="text:Link 3" content="" /> 
<meta name="text:Link 4 URL" content="" /> 
<meta name="text:Link 4" content="" /> 
<meta name="text:Link 5 URL" content="" /> 
<meta name="text:Link 5" content="" /> 

    <style type="text/css"> 

{block:ifTinyCursor} *, body, a, a:hover { cursor: url(http://www.totallylayouts.com/cursors/random/tiny_cursor.png), auto; } {/block:ifTinyCursor} 

::-webkit-scrollbar { height: 10px; width: 7px; background: {color:Scrollbar Background}; } 

::-webkit-scrollbar-thumb:vertical { background: {color:scrollbar}; } 

body { font-family:{select:Font}; font-size:15px; background: {block:ifSolidBackground} {color:Background}; {/block:ifSolidBackground} {block:ifnotSolidBackground} url({image:Background Image}); {block:ifRepeatingBackground} background-repeat:repeat; background-attachment:fixed; background-position:left top;{/block:ifRepeatingBackground} {block:ifnotRepeatingBackground} no-repeat center center fixed; background-attachment:fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;{/block:ifnotRepeatingBackground} {/block:ifnotSolidBackground} color:{color:Text}; } 

html, body { 
    height:100%; 
    width:100% 
} 
.container { 
    width:100%; 
    position:relative; 
    height:100%; 
} 
.container img { 
    position:absolute; 
} 
.container img.one { 
    bottom:77%; 
    left:12%; 
    width:14%; 
} 


a:link, a:active, a:visited { color: {color:Link}; text-decoration:none; } 

a:hover { color:{color:Link Hover}; background:{color:Hover Highlight}; } 

small { font-size:auto } 

big { font-size:auto } 

h1 { font-size:17px; font-family:consolas; } 

h2 { font-size:14px; font-family:{select:Font} } 

p { margin-top:6px; margin-bottom:6px } 

blockquote { padding:0px; padding-left:10px; margin:8px; border-left:1px solid {color:blockquote} } 

blockquote blockquote { padding:0px; padding-left:10px; margin:8px; border-left:2px solid {color:blockquote} } 

img a { border:none; width:100%; } 

{block:if250px} #sidebar { position:fixed; top:130px; {block:ifRightSidebar} right:200px; {/block:ifRightSidebar} {block:ifnotRightSidebar} left:160px {/block:ifnotRightSidebar} ; width:180px; font-family:{select:font}; font-size:11px; padding:10px; } {/block:if250px} 

{block:ifnot250px} #sidebar { position:fixed; top:130px; {block:ifRightSidebar} right:190px; {/block:ifRightSidebar} {block:ifnotRightSidebar} left:120px {/block:ifnotRightSidebar} ; width:250px; font-family:{select:font}; font-size:15px; padding:10px; } {/block:ifnot250px} 

#sidebar a { color:{color:Link}; text-decoration:underline; } 

#sidebar a:hover { color:{color:Link Hover}; background:none; text-decoration:none; } 

#sidebar img { width:145px; height:auto; text-align:center; } 

#desc { position:inline; text-align:center; border:1px solid {color:Borders}; padding:15px; background:{block:ifnotTranslucentPostBG} {color:Post Background} {/block:ifnotTranslucentPostBG} {block:ifTranslucentPostBG} rgba(255, 255, 255, 0.6) {/block:ifTranslucentPostBG}; {block:ifshadow} box-shadow:5px 5px {color:shadow}; {/block:ifshadow} } 

.picc { position:inline; } 

#linkos { text-align:center; line-height:150%; margin-top:15px; } 

{block:if250px} #stuff { background:transparent; width:292px; margin-left:{block:ifRightSidebar} 440px {/block:ifRightSidebar} {block:ifnotRightSidebar} 550px {/block:ifnotRightSidebar}; margin-top:120px; position:inline; } {/block:if250px} 

{block:if400px} #stuff { background:transparent; width:442px; margin-left:{block:ifRightSidebar} 340px {/block:ifRightSidebar} {block:ifnotRightSidebar}550px {/block:ifnotRightSidebar}; margin-top:120px; position:inline; } {/block:if400px} 

{block:if500px} #stuff { background:transparent; width:542px; margin-left:{block:ifRightSidebar} 300px {/block:ifRightSidebar} {block:ifnotRightSidebar}550px {/block:ifnotRightSidebar}; margin-top:120px; position:inline; } {/block:if500px} 

#posts { position:inline; padding:20px; margin:70px 0px 0; background:{block:ifnotTranslucentPostBG} {color:Post Background} {/block:ifnotTranslucentPostBG} {block:ifTranslucentPostBG} rgba(255, 255, 255, 0.6) {/block:ifTranslucentPostBG}; border:1px solid {color:Borders}; {block:ifshadow} box-shadow:5px 5px {color:shadow}; {/block:ifshadow} } 

#posts img { position:center; } 

.caption { text-align:justify; } 

.caption img { max-width:370px; } 

#asker { margin-top:-30px; font-style:italic; } 

#quote { margin-top:-10px; } 

#links { margin-top:-20px; } 

#photoset img { width:10px; position:center; } 

#_ { margin-top:-10px; } 

#footer { margin-top:0px; padding:2px; } 

.info {} 
.info a { text-decoration:none; color:{color:Link}; } 
.info a:hover { text-decoration:none; color:{color:Link Hover}; } 

.sourcevia {} 
.sourcevia a { text-decoration:none; color:{color:Link}; } 
.sourcevia a:hover { text-decoration:none; color:{color:Link Hover}; } 

#pagination { position:inline; padding:5px; margin-bottom:80px; margin-top:40px; font-size:15px; } 

#pagination a { color:{color:text}; text-align:center; text-decoration:none; } 

#pagination a:hover { color:{color:Link Hover}; } 

.user_1 .label { color:{color:link}; font-weight:bold } 
.user_2 .label { color:{color:text}; font-weight:italic } 
.user_3 .label { color:{color:link}; font-weight:text } 

#notes { color:{color:Borders}; } 

.chatt { margin-top:-25px; position:inline; } 

ul.chat, .chat ol, .chat li { list-style:none; margin:0px; padding:0px } 

#credit { margin-left:0px; bottom:0px; padding:5px; position:fixed; text-transform:uppercase; font-size:9px; color:black; } 

    </style> 

</head> 
<body> 

<div class="container"> 
    <img class="one" src="{image:floaty}" /> 
</div> 

{block:ifnotRightSidebar} 
    <div id="sidebar"> 
      <div id="desc"> 
       {block:ifSidebarImage}<div class="picc"><center><img src="{image:Sidebar Image}"></center><br>{/block:ifSidebarImage} 
      {Description} 
        {block:ifnotDropDownNav}<div id="linkos"><a href="/">{text:Home Title}</a> 
         {block:ifLink1}<a href="{text:Link 1 URL}">{text:Link 1}</a>{/block:ifLink1} 
         {block:ifLink2}<a href="{text:Link 2 URL}">{text:Link 2}</a>{/block:ifLink2} 
         {block:ifLink3}<a href="{text:Link 3 URL}">{text:Link 3}</a>{/block:ifLink3} 
         {block:ifLink4}<a href="{text:Link 4 URL}">{text:Link 4}</a>{/block:ifLink4} 
         {block:ifLink5}<a href="{text:Link 5 URL}">{text:Link 5}</a>{/block:ifLink5} 
        </div>{/block:ifnotDropDownNav} 
      {block:ifDropDownNav}<br><br> 
       <form name="gotolocation1" method="POST" ACTION=URI> 
<select name="cherrybammenu1" style="font-family:Arial; font-size:11px; color:#000; background:#fff; width:90px" onChange="location.href=this.options[this.selectedIndex].value;"> 
<option >{text:Nav Title}</option> 
         <option value="/">home</option> 
         {block:ifLink1}<option value="{text:Link 1 URL}">{text:Link 1}</option>{/block:ifLink1} 
         {block:ifLink2}<option value="{text:Link 2 URL}">{text:Link 2}</option>{/block:ifLink2} 
         {block:ifLink3}<option value="{text:Link 3 URL}">{text:Link 3}</option>{/block:ifLink3} 
         {block:ifLink4}<option value="{text:Link 4 URL}">{text:Link 4}</option>{/block:ifLink4} 
         {block:ifLink5}<option value="{text:Link 5 URL}">{text:Link 5}</option>{/block:ifLink5} 
</select> 
      {/block:ifDropDownNav} 
{/block:ifnotRightSidebar} 
</div> 
</div> 
</div> 

<div id="stuff"> 
{block:Posts} 

    <div id="posts"> 

     {block:Text}{block:Title}<h1>{Title}</h1>{/block:Title}<div class="caption">{Body}</div>{/block:Text} 

     {block:Photo}{LinkOpenTag}{block:if250px} <img src="{PhotoURL-250}"> {/block:if250px} {block:if400px} <img src="{PhotoURL-400}"> {/block:if400px} {block:if500px} <img src="{PhotoURL-500}"> {/block:if500px} {LinkCloseTag}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:Photo} 

     {block:Photoset}<div id="photoset">{block:if250px}{Photoset-250}{/block:if250px}{block:if400px}{Photoset-400}{/block:if400px}{block:if500px}{Photoset-500}{/block:if500px}{block:if700px}{Photoset-700}{/block:if700px}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}</div>{/block:Photoset} 

     {block:Quote}<div id="quote"><h1>"{Quote}"</h1></div>{block:Source}<br><div id="source">—{Source}</div>{/block:Source}{/block:Quote}<br> 

     {block:Link}<div id="links"><h1><a href="{URL}" {Target}>{Name}</a></h1></div>{block:Description}{Description}{/block:Description}{/block:Link} 

     {block:Chat}<div class="chatt">{block:Title}<h1>{Title}</h1>{/block:Title}</div>{block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}{/block:Chat} 

     {block:Audio}<div id="_">{AudioPlayerBlack}<br> 
     {block:TrackName}<b>Title:</b> {TrackName}<br />{/block:TrackName} 
     {block:Artist}<b>Artist:</b> {Artist}<br />{/block:Artist} 
     {block:ExternalAudio}<b>Download:</b> <a href="{ExternalAudioURL}">click here</a><br />{/block:ExternalAudio}<b>Played:</b> {PlayCount} times 
     <br clear="all" /></div>{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}<br>{/block:Audio}<br> 

     block:Video}{block:if250px}{Video-250}{/block:if250px}{block:if400px}{Video-400}{/block:if400px}{block:if500px}{Video-500}{/block:if500px}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:Video} 

     {block:Answer}<div id="asker">{Asker}: {Question}</div>{Answer} 
{/block:Answer} 

{block:NoRebloggedFrom} 
{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom} 
{/block:NoRebloggedFrom}{block:ContentSource}<!--{SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} --> {/block:ContentSource} 

<div id="footer"> 
<div id="tags"> 
{block:HasTags}{block:Tags} <a href="{TagURL}">#{Tag}</a> 
{/block:Tags}{/block:HasTags} 

<div class="info"> 
<a href="{Permalink}">{TimeAgo}</a>{/block:Date} 
<a href="{Permalink}"> ({NoteCount}) </a> 

{block:ifShowSourceVia} 
<div class="sourcevia" style="float:right"> 
{block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentName}" >via</a><font color="{color:link}"> </font><a href="{ReblogRootURL}" title="{ReblogRootName}">©</a> {/block:RebloggedFrom} 

</div> 
{/block:ifShowSourceVia} 
</div> 
</div></div> 
</div> 

{/block:Posts} 

{block:Pagination} <div id="pagination"> {block:PreviousPage} <a href="{PreviousPage}" >prev</a>/{/block:PreviousPage}{block:NextPage} <a href="{NextPage}" >next</a> {/block:NextPage} </div> {/block:Pagination} 



{block:PermalinkPage} 
{block:PostNotes} 
<div id="notes">{PostNotes}</div> 
{/block:PostNotes} 
{/block:PermalinkPage} 

</div></div> 

{block:ifRightSidebar} 
    <div id="sidebar"> 
      <div id="desc"> 
       {block:ifSidebarImage}<div class="picc"><center><img src="{image:Sidebar Image}"></center><br>{/block:ifSidebarImage} 
      {Description} 
        {block:ifnotDropDownNav}<div id="linkos"><a href="/">{text:Home Title}</a> 
         {block:ifLink1}<a href="{text:Link 1 URL}">{text:Link 1}</a>{/block:ifLink1} 
         {block:ifLink2}<a href="{text:Link 2 URL}">{text:Link 2}</a>{/block:ifLink2} 
         {block:ifLink3}<a href="{text:Link 3 URL}">{text:Link 3}</a>{/block:ifLink3} 
         {block:ifLink4}<a href="{text:Link 4 URL}">{text:Link 4}</a>{/block:ifLink4} 
         {block:ifLink5}<a href="{text:Link 5 URL}">{text:Link 5}</a>{/block:ifLink5} 
        </div>{/block:ifnotDropDownNav} 
      {block:ifDropDownNav}<br><br> 
       <form name="gotolocation1" method="POST" ACTION=URI> 
<select name="cherrybammenu1" style="font-family:Arial; font-size:11px; color:#000; background:#fff; width:90px" onChange="location.href=this.options[this.selectedIndex].value;"> 
<option >{text:Nav Title}</option> 
         <option value="/">home</option> 
         {block:ifLink1}<option value="{text:Link 1 URL}">{text:Link 1}</option>{/block:ifLink1} 
         {block:ifLink2}<option value="{text:Link 2 URL}">{text:Link 2}</option>{/block:ifLink2} 
         {block:ifLink3}<option value="{text:Link 3 URL}">{text:Link 3}</option>{/block:ifLink3} 
         {block:ifLink4}<option value="{text:Link 4 URL}">{text:Link 4}</option>{/block:ifLink4} 
         {block:ifLink5}<option value="{text:Link 5 URL}">{text:Link 5}</option>{/block:ifLink5} 
</select> 
      {/block:ifDropDownNav} 
{/block:ifRightSidebar} 
</div></div></div> 
<div id="credit"><a href="http://spacegrll.tumblr.com">©</a></div> 


</html>

感謝。

來源

2016-01-24 Racetrack

+0

它會幫助，如果你可以使用SO的片斷或一的jsfiddle純HTML/CSS演示，讓人們可以用它塗鴉。你想做什麼並不難，但是如果沒有演示代碼，這很難解釋。 – AVAVT

+0

不知道你是什麼意思......我不知道我該怎麼做，我是一個絕對的初學者，我唯一的HTML體驗是與tumblr主題。 – Racetrack

回答

0

好的，現在就完成了。

.inner{ 

z-index:-110; 
width:100%; 
height:100%; 
border: 1px solid black; 
position:absolute; 
left: 0; 
    right: 0; 
    top:168%; 
    bottom:0; 
    margin: auto; 

    text-align:center; border:1px solid #474747; padding:15px; background: #d4c8c8 ; 
    font-size:.5em; 
}

這裏的要點是HTML嵌套，位置絕對和z-index的堆疊上的div頂部的照片。

請記住，這將需要一些修改與媒體查詢，使高度適應完美，但這是最好的，我可以很快提出。

我可以嘗試一個flexbox佈局，這可以用我認爲的flexbox完美完成。理想情況下，這些東西是在Photoshop imo中完成的。

鏈接到codepen，點擊它說的地方點擊查看小演示。

http://codepen.io/damianocel/pen/dYKxgW

來源

2016-01-24 10:57:04

+0

感謝您的時間，但這不是我想要做的。有兩個分開的圖像 - 女主角的背景和透明圖像。我試圖讓透明圖像重疊側邊欄，就像我在每個分辨率鏈接的圖像一樣。 – Racetrack

+0

所以你想要較小的圖像與較大的圖像嵌套，並且應該是響應？即兩張不同大小的照片在另一張上？我現在就這樣做。 –

+0

我這麼認爲。對不起，這個東西的語言不完全流利！謝謝你的時間。 – Racetrack

相關問題

 相關問題