0

I'm trying to make a slideshow that resizes proportionally relative to the browser window size, but nothing I try seems to work. The following HTML and CSS is what I use so the slideshow stays centered on my page when the browser window is resized, but it does not yet allow for the slideshow to be resized.

How would I go about doing this? My original thought was simply to give the #parent div a max-width or width of some percentage, but it doesn't work. I thought everything inside, as their widths are all set to 100%, should resize with the #parent div, but they don't. I'm not even sure that the #parent div is even resizing at all...

The img is simple y a placeholder for six images I have in my actual code, but that doesn't make any difference.

#parent {
 height:100%;
}

.fadein {
 position:relative;
 top:70px;
 width:100%;
 height:100%;
}

.fadein img {
 position:absolute;
 left:50%;
 top:50%;
 -webkit-transform: translate(-50%, -0%);
 -moz-transform: translate(-50%, -0%);
}

#slideshow {
 max-width:100%;
 width:100%;
 height:100%;
}
<div id="parent">
   
 <div id="slideshow">
   
  <div class="fadein">
    
   <img src="http://placehold.it/350x150" />
   
  </div>
   
 </div>
    
</div>
T Corin
  • 85
  • 9
  • First put `border: 1px solid red;` to all elements to actually see what is going on. Also remove max-width (not needed). – Rens Tillmann Nov 10 '15 at 23:40
  • Also parent will never be 100% height, you should use `position:fixed;` on that element if I am right. And put width 100% just in case – Rens Tillmann Nov 10 '15 at 23:42
  • @RensTillmann thanks for those tips. I must have added the max-width at some point and forgotten about it. Why will parent never be 100% height? I tried the border idea (so far only for the parent div), and there is only a top border visible... – T Corin Nov 10 '15 at 23:45
  • @RensTillmann I tried the border idea on the slideshow div as well. Then I also tried background-color on the slideshow div, to see what it would do. Nothing. So I changed the height to 100px, and it simply created a blue box, 100px high, above the slideshow. Does this mean the slideshow isn't inside the slideshow div? I'm confused ;(. – T Corin Nov 10 '15 at 23:48
  • No this means your doing it right and you almost fixed it :) – Rens Tillmann Nov 10 '15 at 23:50
  • Position:fixed doesn't seem to do anything? It moved my slideshow over by about 800px to the left, so it is now off the page. – T Corin Nov 10 '15 at 23:51
  • Yes ok but i dont have full code only ur example, anyway do not use fixed in your case. – Rens Tillmann Nov 10 '15 at 23:52
  • Try to put border on fadein also make sure fadein has opacity set to 1 (maybe some external css overides it to 0)? Because you say you only see blue which is weird – Rens Tillmann Nov 10 '15 at 23:53
  • Opacity changed nothing, so there was nothing wrong there, it seems. Put a border on fadein, still the same result, with a 1px strip of red along the very top of the page. Sorry about the seeing only blue, I actually meant red! Oops. – T Corin Nov 11 '15 at 00:02

4 Answers4

1

.fadein img does not have width set to 100%. Also because it is absolutely positioned, the width will be referring to the width of the window. This shouldn't matter though because your parent divs are set to 100%, so either way will look the same.

Edit: also in the future when you have a layout issue, it is really helpful to put a border around your divs. As mentioned in the comments

luca
  • 85
  • 7
  • No its parent has relative – Rens Tillmann Nov 10 '15 at 23:44
  • Uhm... I thought you were onto something there @lucadem1313, but I tried adding height:100% to the img and now the image has disappeared. – T Corin Nov 10 '15 at 23:52
  • @TCorin Add width: 100% – luca Nov 10 '15 at 23:58
  • @TCorin And take away height: 100% – luca Nov 10 '15 at 23:58
  • BTW, because the img is positioned absolutely positioned, it is basically free of the parent element. That is why you are getting a line and not a box – luca Nov 11 '15 at 00:04
  • @lucadem1313 it worked! Almost. The image resizes perfectly, however it no longer seems to be centred. I say seems because it is taking up the whole browser window (all available space, anyway). I tried changing the width of the slideshow div to something smaller, but now it does not centre, but simply sticks to the left edge of the window. – T Corin Nov 11 '15 at 00:05
  • Never mind. I changed the width of the img to a smaller percentage and everything is fixed. Thanks heaps! – T Corin Nov 11 '15 at 00:06
0

For height: 100%; to be the height of the viewport, you heed to have height: 100% on all elements going up including <html> and <body>... Most likely, you're better off using a fixed overlay, and the measurement 100vh. You can find good info on the vh unit and what height: 100% really means here: Percentage Height HTML 5/CSS

Community
  • 1
  • 1
Olex Ponomarenko
  • 905
  • 7
  • 10
0

Your img tag is what needs the resizing. It will act independently from the parent container.

#parent {
 height:100%;
}

.fadein {
 position:relative;
 top:70px;
 width:100%;
 height:100%;
}

.fadein img {
 position:absolute;
 left:50%;
 top:50%;
 -webkit-transform: translate(-50%, -0%);
 -moz-transform: translate(-50%, -0%);
}

#slideshow {
 max-width:100%;
 width:100%;
 height:100%;
}

#slideshow img {
    width: 100%;
}
<div id="parent">
   
 <div id="slideshow">
   
  <div class="fadein">
    
   <img src="http://placehold.it/350x150" />
   
  </div>
   
 </div>
    
</div>
Kyle Comstock
  • 33
  • 4
0
#parent {
height:200px;
  width:300px;
  position:relative;
}
#slideshow {
  position:absolute;
  left:0;
  top:0;
width:100%;
height:100%;
}
.fadein {
  position:fixed;
  left:0;
  top:0;
width:100%;
height:100%;
}
.fadein img {
position:absolute;
left:50%;
top:50%;
-webkit-transform:translate(-50%, -0%);
-moz-transform:translate(-50%, -0%);
  width:100%;
  height:100%;
}
Rens Tillmann
  • 781
  • 6
  • 17