2017-02-21 52 views
0

因此,如標題所示,當我將頁面縮小爲全屏時,我注意到背景div縮放,但圖像上下移動,不縮小以留在背景div /包裝div他們只是相互重疊。我如何讓他們移動他們的div?圖像在窗口縮放時左右移動

此外,我將使用jquery在用戶在手機或平板電腦上時移除圖像,然後將背景div移到寬度方向。我只知道如何用CSS中的jQuery去除圖像,所以有辦法將圖像移動到CSS文件中嗎?

另外,清理我的代碼的指針是值得歡迎的。

\t 
 
html, body{ 
 
    margin: auto; 
 
    padding: 0; 
 

 
    min-width: 100%; 
 
    width: 100%; 
 
    max-width: 100%; 
 

 
    min-height: 100%; 
 
    height: 100%; 
 
    max-height: 100%; 
 
} 
 

 

 
body{ 
 
\t background: #4a525e; 
 
\t max-height: 950px; 
 
\t font-family: Barrio; 
 

 
} 
 
div{ 
 
\t margin: auto; 
 
} 
 
#container{ 
 
\t padding-bottom: 0; 
 
\t margin-right: auto; 
 
\t margin-left: auto; 
 
\t width: 100%; 
 
\t text-align: center; 
 
} 
 

 
.wrapper{ 
 
\t image-rendering: auto; 
 

 
} 
 

 
.beastboy{ 
 
\t background: #84C303; 
 
\t width: 20%; 
 
\t height: 950px; 
 
\t float: left; 
 
\t margin-right: auto; 
 
\t margin-left: auto; 
 
} 
 
.beastboy img{ 
 
\t image-rendering: auto; 
 
\t padding-top: 75%; 
 
\t margin: auto; 
 
} 
 

 
.starfire{ 
 
\t background: #AC9C01; 
 
\t width: 20%; \t 
 
html, body{ 
 
    margin: auto; 
 
    padding: 0; 
 

 
    min-width: 100%; 
 
    width: 100%; 
 
    max-width: 100%; 
 

 
    min-height: 100%; 
 
    height: 100%; 
 
    max-height: 100%; 
 
} 
 

 

 
body{ 
 
\t background: #4a525e; 
 
\t max-height: 950px; 
 
\t font-family: Barrio; 
 

 
} 
 
div{ 
 
\t margin: auto; 
 
} 
 
#container{ 
 
\t padding-bottom: 0; 
 
\t margin-right: auto; 
 
\t margin-left: auto; 
 
\t width: 100%; 
 
\t text-align: center; 
 
} 
 

 
.wrapper{ 
 
\t image-rendering: auto; 
 

 
} 
 

 
.beastboy{ 
 
\t background: #84C303; 
 
\t width: 20%; 
 
\t height: 950px; 
 
\t float: left; 
 
\t margin-right: auto; 
 
\t margin-left: auto; 
 
} 
 
.beastboy img{ 
 
\t image-rendering: auto; 
 
\t padding-top: 75%; 
 
\t margin: auto; 
 
} 
 
.starfire{ 
 
\t background: #AC9C01; 
 
\t width: 20%; 
 
\t height: 950px; 
 
\t float: left; 
 
\t margin-right: auto; 
 
\t margin-left: auto; 
 
} 
 
.starfire img{ 
 
\t padding-top: 15%; 
 
\t padding-left: -50px; 
 

 
}
\t \t \t <div class="wrapper"> 
 
\t \t \t \t \t <div class="beastboy"> 
 
\t \t \t \t \t \t <a href="beastboy.html"> 
 
\t \t \t \t \t \t \t <img class="beastboyimg" src="img/BeastBoyOurline.png"> 
 
\t \t \t \t \t \t </a> \t \t \t 
 
\t \t \t </div> 
 
\t \t 
 
\t \t \t </div> 
 

 
\t \t 
 
\t \t \t <div class="wrapper"> 
 
\t \t \t \t \t <div class="starfire"> 
 
\t \t \t \t \t \t <div class="starfireImg"></div> 
 
\t \t \t \t \t \t <img src="img/StarfireOutline.png"> 
 
\t \t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t

+0

首先,你的CSS似乎是增加了一倍,所以我們怎麼想是 – LGSon

+1

+還添加工作圖片你提到 –

+0

圖片是本地路徑,請更新您的HTML與CDN路徑,你可以更新部分 –

回答

1

以下內容添加到你的CSS,圖像將縮小以適合在容器上。

img { 
    max-width:100% 
}