0

I would like to get all three of these divs (logo, slideshow, and subslider) to fit the entire screen window no matter the size. I basically want to mimic the background:cover action in CSS but with all three of these elements. From my research I need to do something in javascript but I just can't seem to get it to work no matter what I try. I would also like to note that I am using drupal if that changes anything... Despite reading a lot on the subject, I'm way out of my comfort zone when it comes to trying to understand window resizing issues, any help, advice, and code snippets would be a godsend please!

All images and slideshow are centered and stacked horizontally :) 

<div class="logo">
<img src="sites/all/themes/cpd pro/images/cpd.jpg" alt="Center for Passion Development">
</div>
<!-- *************SLIDESHOW***************-- -->
<div id="slider">
<img src="sites/all/themes/cpd pro/images/slide1.jpg"/>
<img src="sites/all/themes/cpd pro/images/slide2.jpg"/>
<img src="sites/all/themes/cpd pro/images/slide3.jpg"/>
<img src="sites/all/themes/cpd pro/images/slide4.jpg"/>
<img src="sites/all/themes/cpd pro/images/slide5.jpg"/>
</div>  
<!-- *************BELOW SLIDESHOW IMAGE***************-- -->
<div class="subslider">
<h5><img src="sites/all/themes/cpd pro/images/nav-wrap.png" alt="navigation">  </h5>
</div>
Thomas Jones
  • 35
  • 4
  • Can you describe how should they be fitted? Should they be arranged horizontally, or vertically? What should their relative sizes be? If you can share a screenshot or a diagram of your desired layout, that would actually help a lot. – Terry May 11 '15 at 19:00
  • Did you try and use % ? The screen is always 100% no matter what size. – Creator May 11 '15 at 19:05
  • Thanks for the input, I just added a screenshot which gives added detail about the layout. As you can see, I don't care if the images get a little cut up on either side as long as everything is always centered and full screen. – Thomas Jones May 11 '15 at 19:10
  • Usually to get have the content fill the whole window I make a main div with width=100% and height=100vh... So I guess that if you adjust your "vh" percent values you can get the result you want! – Luca May 11 '15 at 19:15
  • possible duplicate of [Best way to background cover cross browser](http://stackoverflow.com/questions/5895346/best-way-to-background-cover-cross-browser) (and a lot of other questions) – Joseph Hansen May 11 '15 at 19:16
  • Here is an answer I wrote for a similar question: use flexbox and `background: cover;`: http://stackoverflow.com/a/29705689/756329. `viewport` units are also important to understand. – Joseph Hansen May 11 '15 at 19:17
  • I've tried using a a div id="container" around all three of my elements and setting it to 100% height and 100% width in CSS, I've doing the same thing and setting the CSS to 100vw and 100vh and still nothing like what I'm looking for. I also tried having the height of all three elements add up to a height of 100% and still nothing. I really just want to achieve the same effect as background: cover with all 3 elements... I can't seem to figure out what I'm missing. – Thomas Jones May 14 '15 at 11:38

1 Answers1

2

Use vh unit in CSS. 100vh is exactly 100% of your viewport's height, so you can make your 3 divs heights sum to 100vh.

Robo Robok
  • 21,132
  • 17
  • 68
  • 126
  • I was under the impression that most browsers don't support vw and vh, when I use these values in my css it doesn't give me the desired results. I've been trying to read more about these values but to no avail. – Thomas Jones May 14 '15 at 11:33
  • IE8 doesn't support them, but other than that, it's wonderfully supported: http://caniuse.com/#feat=viewport-units – Robo Robok May 14 '15 at 13:15