Having experience with React Native, I decided to give ReactJS a try. However, I'm struggling with styling my components because CSS is not my strong suit.
To build a small web application, I am using the Ant Design UI framework. Currently, I have a navigation bar at the top of the app and I want to display an image below it that fills 100% of the screen width while maintaining its aspect ratio.
I attempted the following code but it's not achieving the desired result:
<div className="background">
</div>
//In App.css
.background {
background-image: url('./assets/main-image.jpg');
background-size: 'contain';
width: 100%;
height: auto;
}
I've tried various methods without success. The height seems to be limited by the content inside the div. Even with a h1 tag inside, I can only see a portion of the image.
The image I'm using is landscape orientation, 4000px wide. My goal is to dynamically display the image based on the user's screen resolution.
If anyone could guide me in the right direction, I would greatly appreciate it.
Thank you!
Edit: I updated my CSS for the background class and I'm getting closer to the desired outcome:
background-image: url('./assets/main-image.jpg');
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 100vh;
However, there is now excess padding below the image due to it filling the entire viewport height.