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
首先,你的CSS似乎是增加了一倍,所以我們怎麼想是 – LGSon
+還添加工作圖片你提到 –
圖片是本地路徑,請更新您的HTML與CDN路徑,你可以更新部分 –