This is not really a question as a knowledge dump from my current experience trying to zoom with images. Hopefully this helps someone.
The Goal: Have an image stretch proportionally to the width of the a device. Also enable zooming and scroll support. Easy in concept hard in practice. (and partially my lack of understanding )
For my example I’m using this image:
To achieve this, set the following
Html:
<ion-view hide-nav-bar="true" id="comic-view">
<ion-scroll zooming="true" direction="xy" scrollbar-x="false" scrollbar-y="false" min-zoom="1" id="scrolly" style="width: 100%; height: 100%;">
<img id="page" src="http://images.monstermarketplace.com/kids-bedding-sets-and-diaper-bags/comic-book-cover-superman-kryptonite-comic-cover-900x1350.jpg" >
</ion-scroll>
</ion-view>
Setting width of the image to screen width in my controller.
(document.getElementById('page')).style.width = (screen.width) + "px";
Couple of things to note:
- instead of (screen.width) you might need to use (screen.width *window.devicePixelRatio). I was using it at first but took it out because it was scaling things to big and so far I’ve had good results without it.
- The real kicker: min-zoom=“1”. My images were being allowed to scale to far out, and I couldn’t figure out why. I set this bad boy and vola it allows zooming in, but not out past the initial scale.
Overall this was way more confusing to do than I thought it should be. The code is not hard, its just tough figuring out the right combination of settings to achieve the result needed.
A standard mobile chrome browser pointed at http://images.monstermarketplace.com/kids-bedding-sets-and-diaper-bags/comic-book-cover-superman-kryptonite-comic-cover-900x1350.jpg will basically achieve this, but oddly tough through ionic.
Really enjoying this framework otherwise!
Hope this helps someone