title: Swift - Difficulty with different sized images in TableViewCell
body: <p>I am loading a number of remote images with Kingfisher and having significant difficulty getting them to load correctly into a Tableview with cells of dynamic heights. <strong>My goal is to have the images always be the full width of the screen and of a dynamic height, how can this be achieved?</strong></p>
  
  <p>I asked a related question previously which led to understanding the basic layout using a stack view: <a href="https://stackoverflow.com/questions/54851792/snapkit-how-to-set-layout-constraints-for-items-in-a-tableviewcell-programatica/54852250?noredirect=1#comment96678640_54852250">SnapKit: How to set layout constraints for items in a TableViewCell programatically</a></p>
  
  <p>So I've built something like the following:</p>
  
  <p><a href="https://i.stack.imgur.com/Y0SAA.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Y0SAA.png" alt="Hierarchy overview"></a></p>
  
  <p>With the following code (some parts removed for brevity):</p>
  
  <pre><code>// CREATE VIEWS
  let containerStack = UIStackView()
  let header = UIView()
  let headerStack = UIStackView()
  let title = UILabel()
  let author = UILabel()
  var previewImage = UIImageView()
  
  ...
  
  // KINGFISHER
  let url = URL(string: article.imageUrl)
  previewImage.kf.indicatorType = .activity
  previewImage.kf.setImage(
    with: url,
    options: [
      .transition(.fade(0.2)),
      .scaleFactor(UIScreen.main.scale),
      .cacheOriginalImage
  ]) { result in
    switch result {
    case .success(_):
      self.setNeedsLayout()
      UIView.performWithoutAnimation {
        self.tableView()?.beginUpdates()
        self.tableView()?.endUpdates()
      }
    case .failure(let error):
      print(error)
    }
  }
  
  ...
  
  // LAYOUT
  containerStack.axis = .vertical
  
  headerStack.axis = .vertical
  headerStack.spacing = 6
  headerStack.addArrangedSubview(title)
  headerStack.addArrangedSubview(author)
  header.addSubview(headerStack)
  
  containerStack.addArrangedSubview(header)
  containerStack.addSubview(previewImage)
  
  addSubview(containerStack)
  
  headerStack.snp.makeConstraints { make in
    make.edges.equalToSuperview().inset(20)
  }
  
  containerStack.snp.makeConstraints { make in
    make.edges.equalToSuperview()
  }
  </code></pre>
  
  <p>Without a constraint for <code>imageView</code>, the image does not appear.</p>
  
  <p>With the following constraint, the image does not appear either:</p>
  
  <pre><code>previewImage.snp.makeConstraints { make in
    make.leading.trailing.bottom.equalToSuperview()
    make.top.equalTo(headerView.snp.bottom).offset(20)
  }
  </code></pre>
  
  <p>With other attempts, the image is completely skewed or overlaps the labels/other cells and images.</p>
  
  <p>Finally, following this comment: <a href="https://stackoverflow.com/questions/26833627/with-auto-layout-how-do-i-make-a-uiimageviews-size-dynamic-depending-on-the-im#comment88984088_48476446">With Auto Layout, how do I make a UIImageView&#39;s size dynamic depending on the image?</a> and this gist: <a href="https://gist.github.com/marcc-orange/e309d86275e301466d1eecc8e400ad00" rel="noreferrer">https://gist.github.com/marcc-orange/e309d86275e301466d1eecc8e400ad00</a> and with these constraints <code>make.edges.equalToSuperview()</code> I am able to get the images to display at their correct scales, but they completely cover the labels.</p>
  
  <p>Ideally it would look something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/migna.png" rel="noreferrer"><img src="https://i.stack.imgur.com/migna.png" alt="mockup"></a></p>