Below are guidelines on image dimension aspect ratio.

IMAGE DIMENSION HELPER CLASSES RATIO

There are defined helper classes on the theme that are ready to use as follows:

  1. square-images (100% or 1:1) – Makes the content box images shape square on all device.
  2. landscape-images (40% or 5:2) – Makes the content box images shape rectangle in landscape orientation.
  3. portrait-images (150% or 2:3) – Makes the content box images shape rectangle in portrait orientation.
  4. long-portrait-images (180% or 5:9) – Makes the content box images shape long rectangle in portrait orientation.

IMAGE ASPECT RATIO CALCULATOR
Put in the dimensions (Either ratio or Image width or height) of your image element and let the Aspect Ratio Calculator work out the padding-top.

padding-top: 100%