how do i resize my in reactJS so that it fits to the screen?

Question

I am trying to display an image on my application screen. If I set my display settings (Scale and Layout) to 100%, then I am able to see the complete image on my screen. If it is set to default (150%), then the complete image is not displayed or I will have to scroll my screen to view the image fully. How can I set the image to a default size so that I can always view the image completely without scrolling?

Code :

1. JSX file

     <div id = "clearDiv" className = "App-header">
         <img id="elementId" src= {`data:image/png;base64,${this.state.image}`}/>
     </div>  
   

2. CSS

      .App-header {
       background-color: #dfe3eb;
       min-height: 88vh;
       display: flex;
       flex-direction: column;
       align-items: center;
       /* justify-content: center; */
       font-size: calc(10px + 2vmin);
       color: rgb(1, 19, 1);
       }
   

Thanks in advance.!!

Answer 1

Try object-fit property:

img {
    width: 100%;
    min-width: 100%;
    height: 100%;
    object-fit: cover;
}

Answer 2

Is 150% really a default?

Maybe setting width to 100vw

Also, this might help sizing div based on window width