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

[Air-Gear 0]

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>

[Pedro Roccon 9]

Acredito que você tenha que utilizar algum plugin, onde você passa o mouse e ele exibe o ZOOM para você, seria mais ou menos isso?

 

http://www.jacklmoore.com/zoom/

 

Veja se isso te ajuda amigo! :)