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 に答える