I am having a bit of trouble placing a slider inside a Div Block. I have two columns and I want the right hand side to be a slider featuring different projects.
When I practice with it on a test page I can’t get the slider height to match the left hand column or the section height. When I put a height of 100% if seems to make it smaller.
Any ideas?
Screen shots:
2 - Slider in place of the image (Height set to auto)
3 - Slider in place of the image (Height set to 100%)
3- How it looks at the moment
Did you get this fixed? Honestly, I’ve never had success with auto-height. Off top of my head, add a parent Div for both sides, set it to Flex, then expand vertically. The images in the slider need to be large enough to fill the expand. Make them large and add Overflow: Hidden for that parent wrapper.
Example - ROW: col-1 with content “600px height X300px Width” short img col-2 with content "900px height X300px Width " tall img
No way to match visually the height + Zero white space! without “photoshop crop”
effect (100% height wont solve this. See the Q at the bottom).
Some solution/ideas:
set the parent of tall to 600px and overflow hidden
set tall - as background image (cover & center-center) now the height is 600 (flexbox) - very common
or- stretch "short -or- make both short&tall “cropped”
Remember by default flexbox items match height - the best to learn this issue is to add big-red strokes and see the layout.
Read this (You find some examples):
100% height “not working” Q:
The percentage is calculated with respect to the height of the generated box’s containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block. mdn
