Usuário escolhe qualquer foto e vai ajustar o tamanho do espaço

Bom pessoal!

Eu tenho um aplicativo em HTML onde o usuário vai escolher uma imagem qualquer, por busca pela internet ou por imagem salva no aparelho, e vai ser exibido. Só que eu quero que imagem seja exibida completamente dentro do espaço destinado, sem distorce-la, mas posso da um zoom nela. Qual comando que vou utilizar?

O código:

<div class="col-50 block text-right panel" style="margin-right: 2px;position:relative;" ng-click="showOptions(image1)">
 <div ng-show="!shouldShowImage(image1.src)" style="text-align: center;margin:15px;">
 Selecione a sua foto ou a foto de um amigo!
 <div>
 <a class="button button-icon ion-camera larger" ng-click="takePicture(image1)"></a>
 <a class="button button-icon ion-images larger" ng-click="chooseFromGalery(image1)"></a>
 <a class="button button-icon ion-search larger" ng-click="searchImage(image1)"></a>
 </div>
 </div>
 <ion-scroll zooming="true" direction="xy" scrollbar-x="false" scrollbar-y="false" min-zoom="1" max-zoom="3" ng-show="shouldShowImage(image1.src)" ng-click="showHideCleanButton(image1)">
 <img id="image1" ng-src="{{image1.src}}" style="height:100vmin;">
 </ion-scroll>
 <div style="position: absolute;top: 0px;left: 0px;" ng-show="showClearButton(image1)">
 <button ng-click="clean(image1)" class="button button-energized"><i class="icon ion-close-circled"></i></button>
 </div>
 </div>