Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Mayur Pande
PLUS
Mayur Pande
Courses Plus Student 11,711 Points
Posted by Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

Slideshow height not responsive

Hi on this site on the homepage I have a slideshow obtained from cycle2 the slideshow is working fine however as the images are rather large I want the height to be responsive so that it fits within the screen view. I currently have the height set to auto and and the width set to 100%

Here is the html;

     <div class="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-speed="1500" >


       <img src="https://dl.dropboxusercontent.com/s/t1w0mk1uyd72fy1/1.jpg" >


       <img src="https://dl.dropboxusercontent.com/s/sktwyvun1dyflel/2.jpg" >


      <img src="https://dl.dropboxusercontent.com/s/6aaywkif9waz5e6/3.jpg" >


      <img src="https://dl.dropboxusercontent.com/s/xvjg9fnv33ep504/4.jpg" >

    </div>

and here is the css;

.cycle-slideshow { width: 100%; }
.cycle-slideshow img { width: 100%; height:auto; }

My aim to to get the images to reduce in height in order to fit the screen. In fact I don't mind if it cuts a tiny bit off. Is this possible?

1 Answer

Steven Parker
Steven Parker
230,274 Points
Steven Parker
Steven Parker
230,274 Points

If I understand correctly, you want to constrain the image container height to the screen size, and cut off anything that extends beyond it:

.cycle-slideshow {
  max-height: 100vh;
  overflow: hidden;
}
Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points
Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

Hi thank you for the reply and answer. Yes that is correct what your thinking. However have tried what you stated but still not working unfortunately.

Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points
Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

Managed to sort it out in the end, I some how managed to misspell my class name in the css! However I had to do a few little tweeks, as the images were 1080x720px I had to change them to 1080 x 443px. Also as I had the header and footer in the viewport I had to add them together and subtract them from the max-height unit like so;

.cycle-slideshow{
  max-height: calc(100vh - 173px);
 overflow-y: hidden;
}

thank you for the help