0

So I'm loading an image into a UIImageView, but the image view always leaves significant whitespace on either side. It looks like this:

enter image description here

Notice the white on either side of the image. Here's the code to set the image:

cell.albumArt.sd_setImage(with: result.getImageURL())

The imageView is in the aspectFit setting. The constraints are:

  • Image leading to super leading
  • Image top to super top
  • Image bottom to super bottom
  • Text leading to image trailing
  • Text top to image top

What's going on here? How can I remove the whitespace properly?

der_Fidelis
  • 1,475
  • 1
  • 11
  • 25
  • I would imagine from the constraints you have specified there that you're missing a width constraint for the image. – KerrM May 02 '17 at 21:53
  • Aspect Fit *intentionally* leaves whitespace if the image aspect ratio doesn't match the imageview aspect ratio. You can try **Aspect Fill** - but you may not be happy with that result either. – DonMag May 02 '17 at 21:55
  • Try to set a background color to the imageView to differentiate the issue between contentMode and constraints. – Chris May 02 '17 at 21:55
  • @DonMag isn't there a way to get it to align left so that there isn't any of that whitespace? – der_Fidelis May 02 '17 at 22:03
  • @KerrM Even setting a greater than or equal to width constraint doesn't do anything. – der_Fidelis May 02 '17 at 22:03
  • The problem is that you are trying to fit an image with one aspect ratio into a frame that is another aspect ratio. Aspect Fill will fill the frame, but clip off top/bottom or left/right parts of the image. Aspect Fit will fit the entire image into the frame, leaving space on top/bottom or left/right. It's kinda like saying "How come the word *Hello* leaves space on the sides but the word *Acknowledgement* fills the space?"... – DonMag May 02 '17 at 22:06
  • @DonMag I see. It just seems rather odd that the view couldn't shrink it's width to fit the image properly, especially since Android's ImageView supports this functionality. – der_Fidelis May 02 '17 at 22:08
  • If you want the actual ImageView to fit the image size, you have to do that with code... when the image has downloaded, get the dimensions and resize your view as desired. Of course, if you do that, you'll have a whole lotta empty space between the right-edge of your image and the start of the text... unless you *also* adjust the start of the text (which ma or may not be a "good look"). – DonMag May 02 '17 at 22:10
  • @DonMag Okay, well thanks for explaining the situation to me. Very helpful :) – der_Fidelis May 02 '17 at 22:11

1 Answers1

0

You can either try scaleAspectFill with clipToBounds == true or you can set a maximum width and use scaleAspectFit which will try to fit the image inside the given constrained frame while keeping the aspect ratio (But leaving white-space on the sides of the frame, accordingly).

scaleToFill will wreck your image's aspect ratio.

This other question in SO has a pretty sweet answer that explains the differences between each mode

Community
  • 1
  • 1
Ale Ravasio
  • 98
  • 12