Image fitting the entire modal content width and height

@s3rg1 wrote:

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

Posts: 2

Participants: 1

Read full topic