Understanding UIView ContentMode with a simple example

Most of the time there is confusion about various content modes. I would like to clarify all 13 of them in this post. There are 13 content modes as listed below

  1. Scale To Fill
  2. Aspect Fit
  3. Aspect Fill
  4. Redraw
  5. Center
  6. Top
  7. Bottom
  8. Left
  9. Right
  10. Top Left
  11. Top Right
  12. Bottom Left
  13. Bottom Right

Now I would show a simulator screenshot in which i have taken a very large image and set in in 13 small UIImageViews each with a different aspect ratio starting from left to right moving down. First the original Image

UIImageView Content mode example

Now let me present the screenshot of the app

Starting from the top and moving left to right as we go down we have “scale to fill” as first then next image in the same row is “Aspect Fit” then the last image in the first row is “aspect fill”….til the last image “bottom right”.

I have added grid number to the actual image so that you can see which part of the image is visible in which content mode and how the various content mode react when UIImageView frame does not match with Actual image size and aspect ratio. Feel free to ask queries in comment and provide your valuable suggestions


Join group of Software Professionals