How to scale content inside scrollView?

Hi,

Let's say we have a fixed size window, which will show a scrollable image.
Now I want to create a feature which can let user to scale the image, and can scroll and view the scaled image inside the window.
The problem is, once I scaled up the image, the scroll area seems not large enough to cover the whole image.

Code Block 
struct ContentView: View {
    var body: some View {
        ScrollView([.horizontal, .vertical] , showsIndicators: true ){
            Image("test")
                .scaleEffect(2)
        }
        .frame(width: 500, height: 500)
    }
}

When scaleEffect(1), everything is fine. if scaleEffect(2), the image will be twice large, but I cannot reach to each corner of the scaled image.

Thanks in advance!