I'm using Flexslider fullscreen on the site. The problem I'm having is that in a horizontal viewport the portrait aspect images are being severely cropped to fit width. Similarly, in vertical viewports the landscape aspect images are being severely cropped to fit slider height.
I've been looking through the flexslider.css as well as the lines for Flexsider in scripts.js and plugins.js, but nothing is jumping out at me. I'm ok at CSS and my Javascript is entry level. What attributes/settings should I be adjusting?
I'm using Flexslider fullscreen on the site. The problem I'm having is that in a horizontal viewport the portrait aspect images are being severely cropped to fit width. Similarly, in vertical viewports the landscape aspect images are being severely cropped to fit slider height.
I've been looking through the flexslider.css as well as the lines for Flexsider in scripts.js and plugins.js, but nothing is jumping out at me. I'm ok at CSS and my Javascript is entry level. What attributes/settings should I be adjusting?
http://www.jesseshadoan.com/clapat_ndk_portfolio/british-vogue1/ http://www.jesseshadoan.com/clapat_ndk_portfolio/vogue-nippon-4/
Thanks for any help or guidance!
Perhaps you shouldn't look at flexslider settings.
The slides in the main slider have background size set to cover:
.clapat-slider .slides li,.clapat-slider-project .slides li {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
which scales the background image to be as large as possible so that the background area is completely covered by the background image.
You can try setting it to contain in which case you may want to set the background-color property as well.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
Thanks
Thank you.
Clapat Support
Review Envato Item Support Policy
Follow us!
https://www.clapat.com/
https://www.facebook.com/clapat.ro
https://www.instagram.com/clapat.themes/
https://x.com/clapatdesign
https://www.linkedin.com/company/clapatstudio
https://www.tiktok.com/@clapatstudio
Thanks - this is it! I can do the different viewports with @media, but how can I specify only the landscape or portrait images?
contain will preserve the aspect ratio of the image. What exactly do you mean by specifying specify only the landscape or portrait images?
Thank you.
Clapat Support
Review Envato Item Support Policy
Follow us!
https://www.clapat.com/
https://www.facebook.com/clapat.ro
https://www.instagram.com/clapat.themes/
https://x.com/clapatdesign
https://www.linkedin.com/company/clapatstudio
https://www.tiktok.com/@clapatstudio
I think I can make it work with @media and contain actually, so thanks for that.
One follow up question though - how can I adjust the height of the hero container? I've been having some trouble identifying this with chrome..
I want to get rid of the the empty spaces at the top and bottom of the images that I'm getting with contain.
Hello,
it's calculated dynamically in /js/scripts.js
function HeroHeight() { ... }
check how linked it is with the window's current height
Thanks
Thank you.
Clapat Support
Review Envato Item Support Policy
Follow us!
https://www.clapat.com/
https://www.facebook.com/clapat.ro
https://www.instagram.com/clapat.themes/
https://x.com/clapatdesign
https://www.linkedin.com/company/clapatstudio
https://www.tiktok.com/@clapatstudio