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: 
In this case you will need to differentiate between the two possible values in the union type you have.

For example you can make sure that the value is not a string. that way typescript will infer that the value is of type `QuickPickItem`

```
interface State {     
  resourceGroup: QuickPickItem | string;   
}

let state: State = getState();

if (typeof state.resourceGroup != 'string' && state.resourceGroup?.label){
  setEvent(...)
}

```

You can read more about it in the typescript handbook.  

[Type Guards and Differentiating Types](https://www.typescriptlang.org/docs/handbook/advanced-types.html#type-guards-and-differentiating-types)
Easiest is to test for the existence of the `label` property in your variable:

```
if(state.resourceGroup.label) {
   setEvent(state.resourceGroup.label).catch(err => console.error(err));
}

```

Other (unsafe - so only if you are 100% sure what you are doing) way is to use the exclamation mark to assert the existence of the porperty manually:

```
setEvent(state.resourceGroup.label!).catch(err => console.error(err));

```