Child div is not fitting properly with parent div element

I am working on one web application where using html, css and react. Currently i am encountering below issue. Kindly help me sort out this one.

Issue: Image is not fitting with div element.

Code Part:

<Router>
          <div className="App">   
          <Header/>      
              <div className='container'>
                <Route exact path='/' component={Home}/>
                <Route exact path = '/register' component={X}/>
                <Route exact path = '/Login' component ={Y}/>
              div>  
              <Footer/>
          div>               
        Router>

for Home Component:

import '../../Style/Home.css';

class Home extends Component {
  render() {
    return (        
  
          <div className="landing">
     
          div>      
        
    )
  }
}

img{
    width: 100%;
    height: 100%;
 }
.landing
{
    position: relative;
    background: url('../Images/weights-desktop-wallpaper.jpg') no-repeat;
    background-size:cover;
    height:100vh;
    width: 100%;
    overflow: hidden;
    
}

Out Put:(Middile part[Between Header and Footer] of the page)

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Shweta Lodha8y ago
shakti mandal,
Could you please share your findings?
0
shakti mandal8y ago
thanks Shweta for your suggestion. This seems not working as UI layout in my case is different. I have tried in some other way and now it looks working fine.
0
Shweta Lodha8y ago
Here you go:
https://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container
+1