CODEWITHSUNDEEP
htmlcss
please delete me
please delete me

Reputation: 5

Image overflows container when browser is resized

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

Answers (1)

Sumit Gera
Sumit Gera

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

Related Questions