newcoder1010 Posted March 25, 2018 Share Posted March 25, 2018 Hello, I spent hours to fix it but no luck. I created slideshow using carousel. Original size of each image is 1500x650px. CSS to parent class and slideshow images. .front .carousel-inner { position: relative; width: 100%; overflow: hidden; height: 550px; } .front .view-sliders img { width: 100%; } When I visit the site in laptop, it looks ok. As I am making the screen smaller, I see padding between bottom of image and bottom of parent. I can fix the padding by giving height:100% instead of giving height:550px to parent. Problem with that is the image height in laptop looks big. When I get to mobile screen, I have this. I can kind of accept it as is. front .carousel-inner { height: 100%; } At his point, I am asking you to help me fixing it. You can provide any recommendations to make it responsive slideshows. I would like to keep the slideshow images height about 550px by cropping the images. This is my site. If you could visit my site and help me, I would really appreciate it. Thanks. Link to comment Share on other sites More sharing options...
dsonesuk Posted March 25, 2018 Share Posted March 25, 2018 There is no sign of padding? the only padding is from element further outer parent elements? For a proportional image, you usually set width: 100%; and height: auto; the outer parent inner element will extend to the these image dimensions. Now to restrict the height of parent use max-height: 550px; this will force height not to extend beyond this height and with overflow: hidden; will crop the images true height. Link to comment Share on other sites More sharing options...
newcoder1010 Posted March 26, 2018 Author Share Posted March 26, 2018 Max height fixed it. I spent hours for that. Thanks. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now