Center & Aspect Fit Image

Question

Currently I can not set 2 content modes at the same time it seems. But I want the image both scaled and centered. How do I accomplish this?

@property (weak, nonatomic) IBOutlet UIView *windowOut;

self.windowOut.layer.borderColor = [UIColor redColor].CGColor;
self.windowOut.layer.borderWidth = 3.0f;

UIImage *face = [UIImage imageNamed:@"face.png"];

UIImageView* imageView = [[UIImageView alloc] initWithFrame:self.windowOut.frame];
imageView.contentMode = UIViewContentModeScaleAspectFit;
imageView.contentMode = UIViewContentModeCenter;

[imageView setImage:face];
[self.windowOut addSubview:imageView];

This image is the result with the code above: enter image description here

This image is the result when "imageView.contentMode = UIViewContentModeCenter; " is commented out: enter image description here

EDIT: This image is the result when I comment out both contentModes: enter image description here

Doesn't `UIViewContentModeScaleAspectFit` center the image anyway? — Hermann Klecker, Apr 14 '14 at 17:10
Where/when are you assigning the image? Have you checked that the `self.windowOut.frame` is what you expect? — Flexicoder, Apr 14 '14 at 17:26
`UIViewContentModeScaleAspectFit` is scaled and centered _within the image view_. However, if you place the image view in some weird place, then of course the image it contains will also appear in that weird place. — matt, Apr 14 '14 at 17:29
I am pulling the image from the photo library. the frame is as I expect. I set the view in the storyboard. what do you mean some weird place? I have no weird places — Esqarrouth, Apr 14 '14 at 17:44

score 2 · Accepted Answer · answered Apr 14 '14 at 18:11

2

The reason it is not centered is here:

UIImageView* imageView = [[UIImageView alloc] initWithFrame:self.windowOut.frame];

[self.windowOut addSubview:imageView];

That works only when windowOut happens to be located at (0/0). .frame gives the frame in its superview's coordinate system. If windowOut is located at, let's say (20/20) within its superview (self.view?) then imageView will be located at (40,40).

Use bounds instead. That is the same but within its own coordinate system.

UIImageView* imageView = [[UIImageView alloc] initWithFrame:self.windowOut.bounds];
[self.windowOut addSubview:imageView];

answered Apr 14 '14 at 18:11

Hermann Klecker

14,039
5
48
71

Your 3rd image is just proving evidence. `UIViewContentModeScaleAspectFit`will do. – Hermann Klecker Apr 14 '14 at 18:14
your code works perfect for the simulator but when I tested this on the device, it looks like the 3rd image but centered. what could be the problem? – Esqarrouth Apr 17 '14 at 12:08
When you observe strange variations between simulator and device then a) delete the app from the simulator, b) delete the app from the device, c) clean and rebuild. – Hermann Klecker Apr 17 '14 at 12:22
The problem seems to be weirder. Pics downloaded or saved are showing up correctly. Pics that are taken by my iphone camera are not scaling correctly. – Esqarrouth Apr 17 '14 at 13:08
Probably it is the size. Camera pictures are bigger than those which fit on a website and may have been downloaded. If it is the size then go for a different content mode. – Hermann Klecker Apr 17 '14 at 13:10
this seems to be the answer for the device large image problem: http://stackoverflow.com/questions/14485975/uiimageview-image-stretched-even-though-contentmode-uiviewcontentmodescaleaspe – Esqarrouth Apr 17 '14 at 13:20

score 0 · Answer 2 · answered Apr 14 '14 at 17:12

0

If the imageView is set to the same frame as its superview, and the content mode is UIViewContentModeScaleAspectFit, then it should be centered by definition. Good luck!

answered Apr 14 '14 at 17:12

user2105505

686
1
9
18

Just curious, did you try not setting any content mode, in other words, leaving the default content mode? – user2105505 Apr 14 '14 at 17:26
yes I think the problem is not because of the content mode it seems. I added the frame after, now I see that the original image also had a centering problem for some reason. I edited the post – Esqarrouth Apr 14 '14 at 17:53

Center & Aspect Fit Image

2 Answers2