Image fitting the entire modal content width and height

ionic-v1
1

Hello,

I need to display a picture in a modal page filling the entire content, so it has to be resized and centered according to the device’s resolution.

The modal page skeleton is:

<ion-modal-view>
    <ion-header-bar class="bar bar-header bar-calm">
        <h1 class="title">Title</h1>
    </ion-header-bar>
    
    <ion-content scroll="false">
       <img ng-src="{{obj.source}}">
    </ion-content>
    
</ion-modal-view>

The horizontal resize and center can be done in that way:

<div class="wrapper" style="background-image: url({{obj.source}});"></div>

.wrapper {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background-size: cover;
}

However, I need to set an absolut height!! However, the height depends on the smartphone’s screen and a 100% height does not work.
How can I resize the picture according to the smartphone’s screen height for filling the modal’s content?

Thanks & Regards,
Sergi

2

Solved! The following code works properly, as well as the previous with a relative height value.
(I was testing it within a Slide Box component and there was a mistake on my code)

<div class="wrapper" style="background-image: url({{obj.source}});"></div>

.wrapper {
     margin: auto;
    height: 100%;
    width: 90%;
    max-width: 100%;
    border: 0.1em solid rgb(0,0,0);
    border-radius: 1em;
    
    overflow: hidden;
    background-size: cover;
    background-position: center center;
}