Why scale to fill give bigger image than UIImageVIew size? (using swift)

Question

I'm trying to showing a list of place name, including it's photo using PFQueryTableViewController. It's included in ParseUI SDK from parse.com

I have managed to show the image. Unfortunately, when I change the UIImageView mode to Aspect fill, the image is become bigger than it should be.

here are the pictures:

https://dl.dropboxusercontent.com/u/86529526/pic_normal.png https://dl.dropboxusercontent.com/u/86529526/pic_error.png

in pic_normal, you will see two cell, with two normal image. in pic_error, you will the second cell was being overlaid by the first cell image.

can anyone help me to solve this problem? I also put my whole code here :

import UIKit  class TableViewController: PFQueryTableViewController, UISearchBarDelegate {      @IBOutlet var searchBar: UISearchBar!       // Initialise the PFQueryTable tableview     override init(style: UITableViewStyle, className: String!) {         super.init(style: style, className: className)     }      required init(coder aDecoder: NSCoder) {         super.init(coder: aDecoder)          // Configure the PFQueryTableView         self.pullToRefreshEnabled = true         self.paginationEnabled = false     }      // Define the query that will provide the data for the table view     override func queryForTable() -> PFQuery {          // Start the query object         var query = PFQuery(className: "Places")          // query with pointer         query.includeKey("mainPhoto")          // Add a where clause if there is a search criteria         if searchBar.text != "" {             query.whereKey("name", containsString: searchBar.text)         }          // Order the results         query.orderByAscending("name")          // Return the qwuery object         return query     }       //override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell     override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath, object: PFObject) -> PFTableViewCell? {         var cell = tableView.dequeueReusableCellWithIdentifier("CustomCell") as! CustomTableViewCell!         if cell == nil {             cell = CustomTableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: "CustomCell")         }          // Extract values from the PFObject to display in the table cell         if let name = object["name"] as? String{             cell.name.text = name         }          // display initial image         var initialThumbnail = UIImage(named: "question")         cell.photo.image = initialThumbnail           // extract image from pointer         if let pointer = object["mainPhoto"] as? PFObject {             cell.detail.text = pointer["photoTitle"] as? String!             if let thumbnail = pointer["photo"] as? PFFile {                 cell.photo.file = thumbnail                 cell.photo.loadInBackground()             }         }         cell.sendSubviewToBack(cell.photo)          // return the cell         return cell     }         // In a storyboard-based application, you will often want to do a little preparation before navigation     override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {          // Get the new view controller using [segue destinationViewController].         var detailScene = segue.destinationViewController as! DetailViewController          // Pass the selected object to the destination view controller.         if let indexPath = self.tableView.indexPathForSelectedRow() {             let row = Int(indexPath.row)             detailScene.currentObject = objects[row] as? PFObject         }     }      override func viewDidLoad(){         super.viewDidLoad()         let tapGesture = UITapGestureRecognizer(target:self, action:Selector("hideKeyboard"))         tapGesture.cancelsTouchesInView = true         tableView.addGestureRecognizer(tapGesture)     }      func hideKeyboard(){         tableView.endEditing(true)     }      override func viewDidAppear(animated: Bool) {          // Refresh the table to ensure any data changes are displayed         tableView.reloadData()          // Delegate the search bar to this table view class         searchBar.delegate = self     }      func searchBarTextDidEndEditing(searchBar: UISearchBar) {          // Dismiss the keyboard         searchBar.resignFirstResponder()          // Force reload of table data         self.loadObjects()     }      func searchBarSearchButtonClicked(searchBar: UISearchBar) {          // Dismiss the keyboard         searchBar.resignFirstResponder()          // Force reload of table data         self.loadObjects()     }      func searchBarCancelButtonClicked(searchBar: UISearchBar) {          // Clear any search criteria         searchBar.text = ""          // Dismiss the keyboard         searchBar.resignFirstResponder()          // Force reload of table data         self.loadObjects()     }  } 

Answer 1

With content mode set to Aspect Fill, try setting clips to bounds to true as well, reason being the content mode aspect fill keeps on filling the frame of the image view till the frame is fully filled with content also keeping the aspect ratio intact. In the process of filling the container with image maintaining aspect ratio, either vertical or horizontal frame is fully filled, and the filling is continued till the other (if horizontal than vertical or vise versa) portion is fully filled. Thus the first filled portion either across vertical or horizontal will go out of bounds and the content will be visible outside the frame of the image view. To clip the extra content we need to clip the extra portion using imageView's clipsToBounds property set to true

cell.photo.contentMode = UIViewContentMode.ScaleAspectFill cell.photo.clipsToBounds = true 

Answer 2

Reference: an answer in another post which gives you clear insight - https://stackoverflow.com/a/14220605/3021573

Answer 3

Alternatively for guys who prefer Interface Builder, you can check the Clip Subviews at your image view when you choose Aspect Fill, then it will not resize your Image View but still keep the same aspect ratio.

Answer 4

If you want to maintain the aspect ratio with varying width ,then use AspectFill and also use the imageview property clipstoBounds,it will not spread the imageview beyond the frame

Answer 5

From apple doc:

UIViewContentModeScaleToFill

Scales the content to fit the size of itself by changing the aspect ratio of the content if necessary

UIViewContentModeScaleAspectFill

Scales the content to fill the size of the view. Some portion of the content may be clipped to fill the view’s bounds.

So your options are to use

• UIViewContentModeScaleToFill, and possibly change the aspect ratio of displayed image,
• UIViewContentModeScaleAspectFill, and use clipToBounds = YES on your PFImageView, to clip portions of image out of bounds.