For mobile devices, I needed the height to be greater than the width. To achieve this, I removed the aspectRatio from the index.js file in the handleResize function within the src/camera folder, and surprisingly, it worked. However, I am aware that this might not be the ideal solution. Can anyone provide suggestions on how to address this issue for different media breakpoints?
Here is my sandbox code, borrowed from Andrews James's post: https://blog.logrocket.com/responsive-camera-component-react-hooks/
https://codesandbox.io/s/react-camera-component-s0uqfr
Edit: Specific Problem
const [container, setContainer] = useState({ width: 0, height: 0});
const [aspectRatio, calculateRatio] = useCardRatio(0.586);
function handleResize(contentRect) {
setContainer({
width: contentRect.bounds.width,
height: Math.round(contentRect.bounds.width / aspectRatio)
// height: Math.round(contentRect.bounds.width)
});}
CSS Style:
export const Container = styled.div`
position: relative;
width: 100%;
max-width: ${({ maxWidth }) => maxWidth && `${maxWidth}px`};
max-height: ${({ maxHeight }) => maxHeight && `${maxHeight}px`};
overflow: hidden;
`;
Now, the height property remains fixed regardless of the resolution in Chrome DevTools dimensions.
Thank you in advance.