diff --git a/css/60_photos.css b/css/60_photos.css index d508e6767..fce2e7ff2 100644 --- a/css/60_photos.css +++ b/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 { diff --git a/modules/services/plane_photo.js b/modules/services/plane_photo.js index 9449926ec..2e11cdb47 100644 --- a/modules/services/plane_photo.js +++ b/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();