Fix image display

filipecorrea · Jul 9, 2019 · 5b672b3 · 5b672b3
1 parent c1e3013
commit 5b672b3
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 32 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-image-hotspots",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "React component for rendering images with hotspots",
   "main": "dist/ImageHotspots.js",
   "files": [

diff --git a/src/ImageHotspots.js b/src/ImageHotspots.js
@@ -1,5 +1,4 @@
 import React from 'react'
-// import './ImageHotspots.css'
 
 class ImageHotspots extends React.Component {
   constructor (props) {
@@ -39,11 +38,11 @@ class ImageHotspots extends React.Component {
     const imageLoaded = image.initialWidth && image.initialHeight
 
     const containerStyle = {
-      width: '100vw',
-      height: '100vh',
+      width: '100%',
+      height: '100%',
+      position: 'relative',
       overflow: 'hidden',
-      textAlign: 'center',
-      background: '#eee'
+      textAlign: 'center'
     }
 
     let imageStyle = {}
@@ -72,26 +71,16 @@ class ImageHotspots extends React.Component {
 
     if (imageLoaded) {
       if (image.orientation === 'landscape') {
-        imageStyle.height = image.height
-
-        minimapStyle.width = 100 * image.ratio + 'px'
-        minimapStyle.height = 100 + 'px'
-
-        guideStyle.width = (container.width > image.width)
-          ? 100 * image.ratio + 'px'
-          : (100 * image.ratio) / (image.width / container.width) + 'px'
-        guideStyle.height = 100 / image.scale + 'px'
-      } else {
         imageStyle.width = image.width
-
-        minimapStyle.width = 100 + 'px'
-        minimapStyle.height = 100 * image.ratio + 'px'
-
-        guideStyle.width = 100 / image.scale + 'px'
-        guideStyle.height = (container.height > image.height)
-          ? 100 * image.ratio + 'px'
-          : (100 * image.ratio) / (image.height / container.height) + 'px'
+      } else {
+        imageStyle.height = image.height
       }
+      minimapStyle.width = 100 * image.ratio
+      minimapStyle.height = 100
+      guideStyle.width = (container.width > image.width)
+        ? 100 * image.ratio
+        : (100 * image.ratio) / (image.width / container.width)
+      guideStyle.height = 100 / image.scale
     }
 
     return (
@@ -122,12 +111,12 @@ class ImageHotspots extends React.Component {
         ...prevState.image,
         initialWidth,
         initialHeight,
-        width: (orientation === 'portrait')
+        width: (orientation === 'landscape')
           ? container.width
-          : container.height * ratio,
+          : container.height / ratio,
         height: (orientation === 'landscape')
-          ? container.height
-          : container.width * ratio,
+          ? container.width / ratio
+          : container.height,
         scale: 1,
         ratio,
         orientation
@@ -138,12 +127,12 @@ class ImageHotspots extends React.Component {
   zoom (scale) {
     if (scale > 0) {
       const { container, image } = this.state
-      const width = (image.orientation === 'portrait')
+      const width = (image.orientation === 'landscape')
         ? container.width * scale
         : container.height * image.ratio * scale
       const height = (image.orientation === 'landscape')
-        ? container.height * scale
-        : container.width * image.ratio * scale
+        ? container.width * image.ratio / scale
+        : container.height * scale
 
       if (width < image.initialWidth && height < image.initialHeight) {
         this.setState((prevState) => ({

diff --git a/src/ImageHotspots.stories.js b/src/ImageHotspots.stories.js
@@ -7,4 +7,10 @@ import imageFile from './sample.jpeg'
 const image = { src: imageFile, alt: 'my image' }
 
 storiesOf('ImageHotspots', module)
-  .add('default', () => <ImageHotspots src={image.src} alt={image.alt} />)
+  .add('default', () => {
+    return (
+      <div style={{ width: '400px', height: '300px', padding: 20, background: 'black', display: 'flex' }}>
+        <ImageHotspots src={image.src} alt={image.alt} />
+      </div>
+    )
+  })