Q:

Issues with Kivy Scatter, Image size and position

I am having alot of issues trying to add an image to Scatter in Kivy. I want the image to first appear the same height as the boxlayout. Then I would like to be able to move and scale it (this does work currently). When I run the code the image shows up very small. I would also like the image to resize itself if the size of the window is changed. I am new to kivy so any help would be great. Thanks!
<MyGridLayout>:
rows: 1

BoxLayout:
    id:layout1
    orientation: 'vertical'

    BoxLayout:
        id: box1
        size_hint : [1,0.5]

        StencilView:
            ScatterLayout:
                center_x: box1.center_x
                center_y: box1.center_y

                Image:
                    source: 'histo_test.png'
                    size_hint_y: None
                    size_hint_x: None
                    width: self.parent.width
                    height: self.parent.width/self.image_ratio
                    center: self.parent.center
                    allow_stretch: True
                    keep_ratio: True

    BoxLayout:
        size_hint : [1,0.5]
        id:box2

        StencilView:
            ScatterLayout:
                center_x: box2.center_x
                center_y: box2.center_y

                Image:
                    source: 'flower.png'
                    size_hint_y: None
                    size_hint_x: None
                    width: self.parent.width
                    height: self.parent.width/self.image_ratio
                    center: self.parent.center
                    allow_stretch: True
                    keep_ratio: True

A:

The size of the image must be the size of the StencilView, so:
size: stencil.width, stencil.height

or
width: stencil.width
height: stencil.width/self.image_ratio

(stencil is the id of the StencilView)
And the size of the ScatterLayout must be the size of the image:
size: my_image.size  

(my_image is the id of the image)
Also you can set the position of the ScatterLayout with the position of the StencilView:
pos: stencil.pos

instead of this:
center_x: box1.center_x    
center_y: box1.center_y

Watch this video for more info.

I wrote this code which does almost the same
<MyGridLayout>:
    orientation: 'vertical'
    StencilView:
        id: stencil1
        Scatter:
            pos: stencil1.pos
            size: my_image1.size
            Image:
                id: my_image1
                size: stencil1.width, stencil1.height
                source: 'dog.jpg'
                allow_stretch: True
                keep_ratio: False
    StencilView:
        id: stencil2
        Scatter:
            pos: stencil2.pos
            size: my_image2.size
            Image:
                id: my_image2
                size: stencil2.width, stencil2.height
                source: 'flower.jpg'
                allow_stretch: True
                keep_ratio: False

Sorry if my english isn't clear

