how to control the distorted and stretched image in graphicsmagick node.js

Question

I want an image to be display by keeping its aspect ratio same by re-sizing it, but the image looks stretched. I have three images all of 50 by 50. I want the left image to be re-sized by maintaining its aspect ratio. The other two images will be shown up and down parallel to the first image. I think mosaic() build the four blocks. but I want three blocks, in fitst block first image will come up and it would be re-sized all the way till end, and the next two blocks the other two images will come up and down and show parallel to the first one. Below is the code

gm()
        .in('-page', '+0+0')
        .in('-resize', '50x100!')
        .in('http://localhost:8080/image1')
        .in('-page', '+50+0')
        .in('http://localhost:8080/image2')
        .in('-page', '+50+50')
        .in('http://localhost:8080/image3')
        .mosaic()
        .write('C:/images/output.jpg', function (err) {
            if (err) console.log(err);
        });

I want an image like below but with keeping its aspect ratio, black image looks stretched, I don't want it be stretched, and black image should cover whole left area till end

If I remove ! the image then looks like, I want an image as above but not stretched

Answer 1

I don't use node but I think you will be able to adapt this:

Make our three images:

convert -size 50x50 -background black -fill white  -gravity center -pointsize 36 label:"1" image1.jpg
convert -size 50x50 -background red -fill white  -gravity center -pointsize 36 label:"2" image3.jpg
convert -size 50x50 -background red -fill white  -gravity center -pointsize 36 label:"3" image3.jpg

Now resize and arrange:

convert image1.jpg -resize x100 -gravity center -extent 50x100 \( image2.jpg image3.jpg -append \) +append result.png

Essentially, I am making image1 100 pixels tall with -resize x100 and then extracting the central 50 pixel wide band down the middle with -gravity center -extent 50x100. Then, in parentheses and "on-the-side" I am loading image2 and image3 and placing one below the other with -append. That pair of images is then appended to the right of the original image with +append and the result is written out to result.png.