Make UIImage fit into UIImageView inside UIView

Question

I'm having a lot of trouble getting images to fit, with the correct aspect ratio within their UIImageView.

All images inserted initially from a plist into core data do fit with the right aspect ratio, but as images are added using the app (from the existing library of images), the images in two of three views appear larger than the view itself - so that just the top left corner of the photo is shown. In the screenshot below, the top row of the table shows an image added via the plist and the next two rows (MY RECORDS) show photos that are not confined to the view.

The cells in the above view are created in the usual way, and then configured in its own method, where it's properties are defined.

    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell
{
    let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath)
    self.configureCell(cell, indexPath: indexPath)
    return cell
}

    func configureCell(cell: UITableViewCell, indexPath: NSIndexPath)
{
    let record = fetchedResultsController.objectAtIndexPath(indexPath) as! Record
    cell.textLabel!.text = record.subject
    cell.detailTextLabel!.text = record.shortDetails

    if let imageArray = imagesForRecord(record)
    {
        if imageArray.count > 0
        {
            cell.imageView?.contentMode = .ScaleAspectFit
            cell.imageView?.clipsToBounds = true
            cell.imageView?.image = imageArray[Int(record.featureImageIndex)]
        }
    }
}

But the image does not scale, nor is it clipped within the bounds of the imageView. The images that were initially loaded, like the bear, did not require contentMode or clipsToBounds to be set.

I have the same issue in a different view controller (call it VC2), but this view is defined using storyboard. I've an UIImage view that is constrained to all sides of a UIView that has fixed size constraints. The UIImage view is set to Aspect Fit, but when I set an image from the devices library it appears like the pictures above - the aspect ratio is correct, but only the top corner of the image is shown.

In yet another view, I have almost the same storyboard layout as VC2, but here it works as expected. I cannot see any difference in the constraints, properties, and the same photos are being used (from the library).

I can't see any differences, and I can't imagine how to debug from here. No doubt I am misunderstanding something quite simple about Aspect Fit or how to apply it.

Answer 1

The issue is if you use the default imageView that it doesn't contain any constraints. When you load bigger image it will display full size.

Two solutions:

• Create a cell model, insert your imageView, and give it constraints in the storyboard.
• Check the constraints that you added to the default imageView.

For example:

let horizontalConstraint = NSLayoutConstraint(item: newView, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.CenterX, multiplier: 1, constant: 0)
newView.translatesAutoresizingMaskIntoConstraints = false
cellView.addConstraint(horizontalConstraint)