CODEWITHSUNDEEP
cssimagehtmloverlap
maurice85
maurice85

Reputation: 69

css: issue with images when browser zoomed

My webpage is "powerpoint style", consists of 100% height slides one under the other. 

<div id="slide1" class="whitepage">
    <div class="content">
    ....
    </div>
</div>

<div id="slide2" class="blackpage">
    <div class="content">
    ....
    </div>
</div>

and so on. The css is below:

body{
text-align:center;
height:100%;
margin: 0 auto;
}

.whitepage{
height: auto;
margin: 0 auto;
background: white;
min-height: auto;
min-width: 1024px;
color: black;
border: 1px solid red;
}

.blackpage{
height: auto;
margin: 0 auto;
background: black;
min-height: auto;
min-width: 1024px;
color: white;
border: 1px solid blue;
}

.content{
position: relative;
margin: 0 auto; 
text-align: center; 
min-height: 100%;
min-width: 1024px;
border: 1px dotted green;
}

With this css each slide loads at 100% height (display visible area) and it's ok. Let's imagine that .content consists of a single .png image. If zoom the browser at 150% or more, or if I resize the browser window making it smaller (height) the image overruns in the following slide, but I'd like that the page containing the image extends itself downward in order to contain the image properly. I can get this if I use generic text instead of an image in .content. What am I doing wrong?

Upvotes: 0

Views: 202

Answers (1)

Mahendra Shekhawat
Mahendra Shekhawat

Reputation: 307

I think you need to take width=100% for .content and in the image the height and width should be present. Also try using width at the palace of min-width.

Upvotes: 1

Related Questions