diff options
| -rw-r--r-- | www/css/style.css | 10 | ||||
| -rw-r--r-- | www/templates/events-modal.html | 8 | ||||
| -rw-r--r-- | www/templates/monitors-modal.html | 10 |
3 files changed, 19 insertions, 9 deletions
diff --git a/www/css/style.css b/www/css/style.css index ef98f353..462cb399 100644 --- a/www/css/style.css +++ b/www/css/style.css @@ -439,6 +439,16 @@ progress[aria-valuenow]:before { } +/* + +.object-fit_cover { object-fit: cover; width:100%; height:auto;} +.object-fit_contain { object-fit: contain; max-width:100%; height:auto; } +*/ + + +.object-fit_cover { object-fit: cover; width:100%; height:auto;} +.object-fit_contain { object-fit: contain; max-width:100%; max-height:100%; } + .list .item.item-accordion { line-height: 200px; padding-top: 0; diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html index a348888b..6efb4f07 100644 --- a/www/templates/events-modal.html +++ b/www/templates/events-modal.html @@ -13,18 +13,18 @@ <li ng-repeat="slide in slides"> <div ng-if="!animationInProgress"> - <img imageonload="finishedLoadingImage($index)" + <img style="width:100vw; height:100vh" imageonload="finishedLoadingImage($index)" image-spinner-src="{{playbackURL}}/index.php?view=image&rand={{$root.rand}}&path={{relativePath}}{{slide.img}}&scale={{loginData.singleImageQuality}}" image-spinner-loader="lines" - ng-class="{'zm-image-fit':imageFit==true, 'zm-image-crop':imageFit==false}" + ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}" /> </div> <div ng-if="animationInProgress"> - <img imageonload="finishedLoadingImage($index)" + <img imageonload="finishedLoadingImage($index)" image-spinner-src="img/pausevideo.png" image-spinner-loader="lines" - ng-class="{'zm-image-fit':imageFit==true, 'zm-image-crop':imageFit==false}" /> + ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}" /> </div> diff --git a/www/templates/monitors-modal.html b/www/templates/monitors-modal.html index 34bfad22..65e99803 100644 --- a/www/templates/monitors-modal.html +++ b/www/templates/monitors-modal.html @@ -9,7 +9,7 @@ <ion-scroll delegate-handle="imgscroll" has-bouncing=false min-zoom=1 zooming="true" direction="xy" style="width: 100%; "> <!-- android needs this 100vh - otherwise max- does not work --> - + <!-- --> <div id="monitorimage" style="height: 100vh;" class="main"> @@ -17,10 +17,10 @@ <div ng-if="$root.authSession!='undefined'"> - <div ng-if="!animationInProgress"> - <img imageonload="finishedLoadingImage()" + <div ng-if="!animationInProgress" > + <img style="width:100vw; height:100vh" imageonload="finishedLoadingImage()" image-spinner-loader="lines" - image-spinner-src="{{LoginData.streamingurl}}/nph-zms?mode=single&monitor={{monitorId}}{{$root.authSession}}&rand={{$root.modalRand}}" ng-class="{'zm-image-fit':imageFit==true, 'zm-image-crop':imageFit==false}" + image-spinner-src="{{LoginData.streamingurl}}/nph-zms?mode=single&monitor={{monitorId}}{{$root.authSession}}&rand={{$root.modalRand}}" ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}" on-swipe-left="onSwipe(monitorId,1)" on-swipe-right="onSwipe(monitorId,-1)" /> @@ -28,7 +28,7 @@ <div ng-if="animationInProgress"> <img - ng-src="img/pausevideo.png" ng-class="{'zm-image-fit':imageFit==true, 'zm-image-crop':imageFit==false}" + ng-src="img/pausevideo.png" ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}" /> </div> |