This image is 400 x 1200 pixels. Each square is 100 pixels tall and wide. The blue squares are numbered sequentially, so you can see how the picture is being cropped to make it fit your browser size. If the browser width is more than 1200 pixels then the image will stretch to the larger width and crop the height. If the browser width is less than 1200 pixels then it will retain the 400 pixel height and crop the width.
This image is 300 pixels tall by 1200 pixels wide. Each square is 100 pixels. The block is forcing the image to be 400 pixels tall, so it is resizing the image to a height of 400 and cropping the width of the image.
This image is 600 pixels wide by 400 pixels tall. The blue squares are numbered sequentially. Each square is 100 pixels.
The image to the right is 200x600 pixels The squares are all 100 x 100 pixels square. Even though the image is only 200 pixels tall, the 2 column format is forcing it to display at 400 pixels tall and cropping the width.
This column has a solid orange background so you can see the size of the entire column
400 x 1200 grid using the parallax scrolling feature.