Image - crop to fit or scale to fit - does not work in Android


#1

Hello, I have the following code that displays an image

<img  ng-src="someimage.jpg" 
ng-class="{'zm-image-fit':imageStyle==true, 'zm-image-crop':imageStyle==false}"/>

Where

.zm-image-fit
{
    max-width: 100%;
    max-height: 100%;
}

.zm-image-crop
{
    width:100%;
}

Depending on a button a user presses, the image is “refitted” on the screen. If it uses zm-image-crop then the image covers the entire screen but may crop the height. If it uses zm-image-fit then it displays the entire image.

This works on iOS and desktop Safari but not in Android. In Android the image does not re-fit itself. Any suggestions?


#2

This forum is magical. I figure out (or find out) an answer right after I post.
The trick was to wrap it in a div with a size but without having to worry about what size to specify

Wrapping it around:
<div style="height: 100vh;"></div>

did the trick