Question

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

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

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

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>

Answer 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%;
}

调整浏览器大小时图像溢出容器

1 个答案: