我已经开始设计一个站点，并且使用了一个包装器，用于放置我的信息和图像。我已经将第一个图像添加到包装器中，当浏览器为全尺寸时，它看起来很棒。
但是，当我调整浏览器的大小时，图像（跨页面的链）移出了包装的每一面。
理想情况下，我想对其进行更改，以便在调整浏览器的大小并在页面上滚动时，链条仍位于包装器内。
body {
background-color:#2791ce;
background-image:url(../img/images/lightblue_02.jpg);
background-size:98%;
background-repeat: repeat-y;
background-position:center;
}
#wrapper {
width:1174px;
margin-left:auto;
margin-right:auto;
position:relative;
padding-bottom:350px;
}
#logo {
position:relative;
padding-left:6%;
margin-left:auto;
margin-right:auto;
}
#chain {
position:relative;
margin-left:auto;
margin-right:auto;
padding-top:5%;
}
<html>
</head>
<body/>
<div id="wrapper">
<div id="logo">
<img src="img/images/skip.png"/>
</div>
<div id="chain">
<img src="img/images/images/images/Untitled-1_02_02.png" width="1174" height="32" />
</div>
</div>
</div>
</body>
</html>
<html>
最佳答案
如果要保持宽高比，请尝试将这些行添加到图像中。我认为img是您图像的类。
.img {
max-width:<max-width of your parent div>
max-height:<max-height of your parent div>
}
如果要缩放图像，请插入以下代码。
.img {
width:100%;
max-width:100%;
display:block;
height:100%;
max-height:100%;
}
关于html - 调整浏览器大小时图像溢出容器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14014171/