💄 Improve Image and ImageContainer

Author: Jonas Gossens

examples/react-chayns-gallery/Example.jsx

@@ -65,6 +65,9 @@ export default class GalleryExample extends Component {
                     styleLandscape={{ borderRadius: '10px' }}
                     stylePortrait={{ border: '3px solid black' }}
                 />
+                <Image
+                    image={images[0]}
+                />
                 <h3>ImageContainer-Component</h3>
                 <ImageContainer
                     tools={[

src/react-chayns-gallery/component/Image.jsx

@@ -52,7 +52,6 @@ export default class Image extends PureComponent {
     }
 
     componentDidMount() {
-        this.getElementDimensions();
         this.init();
     }
 
@@ -72,6 +71,8 @@ export default class Image extends PureComponent {
     };
 
     init = async () => { // set url and metadata
+        this.getElementDimensions();
+
         const { image, styleLandscape, stylePortrait } = this.props;
 
         if (typeof image === 'string') { // url

src/react-chayns-gallery/component/Image.scss

@@ -1,6 +1,6 @@
 .cc__image {
   position: relative;
-  height: auto;
+  height: 100%;
   display: flex;
   flex: 1;
   -ms-flex: 1;

src/react-chayns-gallery/component/ImageContainer.scss

@@ -10,6 +10,9 @@
     left: 0;
     bottom: 0;
     right: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 
   &__tools {