Attempt to fix plane photoviewer.

css/60_photos.css

@@ -68,8 +68,7 @@
 }
 
 
-.photo-wrapper,
-.photo-wrapper img {
+.photo-wrapper {
     width: 100%;
     height: 100%;
     overflow: hidden;
@@ -361,12 +360,18 @@ label.streetside-hires {
 }
 
 .plane-frame {
-    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
     height: 100%;
+    width: 100%;
 }
 
-.plane-frame > .plane-photo{
-    transform-origin:0 0;
+.plane-frame > img.plane-photo{
+    width: min-content;
+    height: 100%;
+    transform-origin: 0 0;
 }
 
 .vegbilder-wrapper {

modules/services/plane_photo.js

@@ -10,30 +10,33 @@ let imgZoom;
 export default {
 
   init: async function(context, selection) {
+    this.event = utilRebind(this, dispatch, 'on');
+
     imgZoom = d3_zoom()
                 .extent([[0, 0], [320, 240]])
-                //.translateExtent(?)
+                .translateExtent([[0, 0], [320, 240]])
                 .scaleExtent([1, 15])
                 .on('zoom', this.zoomPan);
 
     const wrapper = selection
       .append('div')
       .attr('class', 'photo-frame plane-frame')
-      .call(imgZoom)
       .classed('hide', true);
 
     _photo = wrapper
       .append('img')
       .attr('class', 'plane-photo');
 
-    this.event = utilRebind(this, dispatch, 'on');
-
-    context.ui().photoviewer.on('resize.plane', (dimensions) => {
+    context.ui().photoviewer.on('resize.plane', () => {
+      const {width: wrapperWidth} = wrapper.node().getBoundingClientRect();
+      const {width, height} = _photo.node().getBoundingClientRect();
+      const widthOverflow = width - wrapperWidth;
       imgZoom = d3_zoom()
-                .extent([[0, 0], dimensions])
-                //.translateExtent(?)
-                .scaleExtent([1, 15])
-                .on('zoom', this.zoomPan);
+        .extent([[widthOverflow / 2, 0], [wrapperWidth + widthOverflow / 2, height]])
+        .translateExtent([[0, 0], [width, height]])
+        .scaleExtent([1, 15])
+        .on('zoom', this.zoomPan);
+      wrapper.call(imgZoom);
     });
 
     await Promise.resolve();