My current project involves creating a demo of my app within the app itself. To give you an idea, check out the images below:
https://i.sstatic.net/J4gbS.png
https://i.sstatic.net/OAmwK.png
Let me provide some context.
The large black rectangle represents the phone screen boundary. The green area acts as margin space. The pink section showcases an outline image of a phone, while the blue portion displays a video of my app overlaid on the phone image. Together, they offer a visual representation of my app in action on a phone. These elements are horizontally centered. The bottom of the blue video aligns with the top of the yellow text box. The challenge arises from scaling down the oversized pink phone image and ensuring it is truncated by the yellow section. There should be an 80-pixel margin between the top of the pink image and the screen's top, or alternatively, we can consider resizing the phone image to about 80% of the full screen size for ease of implementation. Since I am using the same iPhone 8 image across multiple screen sizes (iPhone 8, iPhone 8 Plus, iPhone 11), hardcoding values is not ideal.
The code snippet I have so far addresses most elements, but encounters issues with the pink phone image getting cut off at the top (written in React-Native, though comprehensible regardless; HTML version available upon request):
<View style={{ flex: 1, flexDirection: 'column' }}>
<View style={{ flex: 3, textAlign: 'center', marginTop: 80 }}>
<View style={{ flex: 1, flexDirection: 'column' }}>
<View style={{ flex: 1 }}></View>
<Image style={{ marginTop: 'auto', height: 400, width: 375, position: 'absolute' }} source={require('assets/iphone.png')} resizeMode={'cover'} />
<Video style={{ marginTop: 'auto', height: 350, width: 340, alignSelf: 'center' }} rate={2} source={require('assets/app.mp4')} shouldPlay={true} />
</View>
</View>
<View style={{ flex: 2, paddingTop: "10%" }}>
<Text>{item.title}</Text>
<Text>{item.text}</Text>
</View>
</View>
I suspect that enclosing the pink image within an image container div might be necessary, but I'm uncertain how to proceed from there. Can someone assist me in resolving this complex CSS issue?