我已经开始设计一个站点，并且使用了一个包装器来放置我的信息和图像。我已将我的第一张图片添加到包装器中，当浏览器为全尺寸时，它看起来很棒。
但是，当我调整浏览器大小时，图像(它是一条穿过页面的链)移出包装器的每一侧。
理想情况下，我想更改它，以便在调整浏览器大小时滚动页面时，链保留在包装器内。
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/