jquery - 缩放窗口时图像左右移动

Question

正如标题所说，当我将页面缩放到全屏之外时，我注意到背景 div 缩放，但图像上下移动并且不会缩小以留在背景 div/wrapper 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%
}