Reputation: 5
I've started to design a site, and I have used a wrapper where my information and images will be positioned. I have added my first image into the wrapper and when the browser is fullsize it looks great.
But when I resize the browser, the image (which is a chain going across the page) moves out of each side of the wrapper.
Ideally I would like to change it so that when the browser is resized and I scroll across the page, the chain remains inside the wrapper.
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>
Upvotes: 1
Views: 161
Reputation: 1241
If you want to keep the aspect ratio, try adding these lines to your image. I am considering img to be the class of your image.
.img {
max-width:<max-width of your parent div>
max-height:<max-height of your parent div>
}
And if you want to scale the image, insert the following code.
.img {
width:100%;
max-width:100%;
display:block;
height:100%;
max-height:100%;
}
Upvotes: 1