UIImageView Content Modes

A guide to UIImageView content modes in Swift (iOS) and how they alter the image presented to a user.

Oscar de la Hera Gomez
Written by Oscar de la Hera Gomez
First published on 07/20/2022 at 16:45
Last Updated on 08/27/2022 at 12:04
A flower that represents Swift next to a flower that represents XCode. Beneath it sits the text that states 'UIImageView Content Modes'.

A guide to UIImageView content modes in Swift (iOS) and how they alter the image presented to a user.

The following tutorial makes use of the tutorial that we created for adding a UIImage to a UIView and is available on the tutorial/content-modes branch in the repository linked below.

Download Open Source project

How to alter content modes ?

Use the following line to alter your content mode, where your_content_mode is a UIImageView contentMode.

self.imageView.contentMode = .your_content_mode
Read up on UIImageView Content Modes

What are the popular content modes?

Scale Aspect Fit

Available using .scaleAspectFit.

Sample screenshot of the scale aspect fit content mode.

Scale Aspect Fill

Available using .scaleAspectFill.

Sample screenshot of the Scale Aspect Fill content mode.

Scale To Fill

Available using .scaleToFill.

A screenshot of the scale to fill content mode.

What other modes are available?

Top

Available using .top.

A screenshot of the top content mode.

Right

Available using .right.

A screenshot of the right content mode.

Center

Available using .center.

A screenshot of the center content mode.

Bottom

Available using .bottom.

A screenshot of the bottom content mode.

Left

Available using .left.

A screenshot of the left content mode.

Redraw

Available using .redraw.

A screenshot of the redraw content mode.

Bottom Left

Available using .bottomLeft.

A screenshot of the bottom left content mode.

Bottom Right

Available using .bottomRight.

A screenshot of the bottom right content mode.

Top Left

Available using .topLeft.

A screenshot of the top left content mode.

Top Right

Available using .topRight.

A screenshot of the top right content mode.

Any Questions

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.

SubscribeInquireView All PostsView All ServicesView All Work

Partner with us

We would love to get to know you and see how we can help your organization with its goals and needs.
Let's Talk

Stay Informed

Get occasional updates about our company, research, and product launches.
Subscribe