1

我已经开始设计一个网站，并且我使用了一个包装器来放置我的信息和图像。我已将我的第一张图片添加到包装器中，当浏览器全尺寸时，它看起来很棒。

但是当我调整浏览器的大小时，图像（这是一个穿过页面的链）移出包装器的每一侧。

理想情况下，我想更改它，以便在调整浏览器大小并滚动页面时，链保留在包装器内。

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>
4

1 回答 1

1

如果您想保持纵横比，请尝试将这些线条添加到您的图像中。我正在考虑 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%;
}
于 2012-12-23T20:34:40.800 回答