Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Mayur Pande
PLUS
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
216,083 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

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

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