縮放窗口時圖像左右移動

Question

因此，正如標題所述，當我在全屏模式下縮放頁面時，我注意到背景div縮放，但是圖像會上下移動，並且不會縮小以保持在背景div /包裝div的內部，它們只是彼此重疊。 我將如何讓他們與div一起移動？

另外，當用戶在手機或平板電腦上時，我將使用jquery刪除圖像，然后將背景div沿寬度方向移動。 我只知道如何在CSS中使用jQuery刪除圖像，那么有沒有辦法將圖像移動到CSS文件？

另外，非常歡迎提供清理我的代碼的指針。

 html, body{ margin: auto; padding: 0; min-width: 100%; width: 100%; max-width: 100%; min-height: 100%; height: 100%; max-height: 100%; } body{ background: #4a525e; max-height: 950px; font-family: Barrio; } div{ margin: auto; } #container{ padding-bottom: 0; margin-right: auto; margin-left: auto; width: 100%; text-align: center; } .wrapper{ image-rendering: auto; } .beastboy{ background: #84C303; width: 20%; height: 950px; float: left; margin-right: auto; margin-left: auto; } .beastboy img{ image-rendering: auto; padding-top: 75%; margin: auto; } .starfire{ background: #AC9C01; width: 20%; html, body{ margin: auto; padding: 0; min-width: 100%; width: 100%; max-width: 100%; min-height: 100%; height: 100%; max-height: 100%; } body{ background: #4a525e; max-height: 950px; font-family: Barrio; } div{ margin: auto; } #container{ padding-bottom: 0; margin-right: auto; margin-left: auto; width: 100%; text-align: center; } .wrapper{ image-rendering: auto; } .beastboy{ background: #84C303; width: 20%; height: 950px; float: left; margin-right: auto; margin-left: auto; } .beastboy img{ image-rendering: auto; padding-top: 75%; margin: auto; } .starfire{ background: #AC9C01; width: 20%; height: 950px; float: left; margin-right: auto; margin-left: auto; } .starfire img{ padding-top: 15%; padding-left: -50px; } 

  <div class="wrapper"> <div class="beastboy"> <a href="beastboy.html"> <img class="beastboyimg" src="img/BeastBoyOurline.png"> </a> </div> </div> <div class="wrapper"> <div class="starfire"> <div class="starfireImg"></div> <img src="img/StarfireOutline.png"> </div> </div> 

Answer 1

將以下內容添加到您的CSS中，圖像將按比例縮小以適合容器。

img {
  max-width:100%
}