title: UIScrollView with scaled UIImageView using autolayout
body: <p><img src="https://i.stack.imgur.com/sbFho.png" alt="UIScrollView with UIImageView"></p>
  
  <p>Consider a <code>UIScrollView</code> with a single subview. The subview is an <code>UIImageView</code> with the following size constraints: </p>
  
  <ul>
  <li>Its height must be equal to the height of the <code>UIScrollView</code>.</li>
  <li>Its width must be the width of the image scaled proportionally to the height of the <code>UIImageView</code>.</li>
  </ul>
  
  <p>It is expected that the width of the <code>UIImageView</code> will be bigger than the width of the UIScrollView, hence the need for scrolling.</p>
  
  <p>The image might be set during <code>viewDidLoad</code> (if cached) or asynchronously.</p>
  
  <p>How do you implement the above using autolayout, making as much use as possible of Interface builder?</p>
  
  <h2>What I've done so far</h2>
  
  <p>Based on this <a href="https://stackoverflow.com/a/13548039/143378">answer</a> I configured my nib like this:</p>
  
  <ul>
  <li>The <code>UIScrollView</code> is pinned to the edges of its superview.</li>
  <li>The <code>UIImageView</code> is pinned to the edges of the <code>UIScrollView</code>.</li>
  <li>The <code>UIImageView</code> has a placeholder intrinsic size (to avoid the <em>Scrollable Content Size Ambiguity</em> error)</li>
  </ul>
  
  <p>As expected, the result is that the <code>UIImageView</code> is sized to the size of the <code>UIImage</code>, and the <code>UIScrollView</code> scrolls horizontally and vertically (as the image is bigger than the <code>UIScrollView</code>).</p>
  
  <p>Then I tried various things which didn't work:</p>
  
  <ul>
  <li>After loading the image manually set the frame of <code>UIImageView</code>.</li>
  <li>Add a constraint for the width of the UIImageView and modify its value after the image has been loaded. This makes the image even bigger (?!).</li>
  <li>Set <code>zoomScale</code> after the image is loaded. Has no visible effect.</li>
  </ul>
  
  <h2>Without autolayout</h2>
  
  <p>The following code does exactly as I want, albeit without autolayout or interface builder.</p>
  
  <pre><code>- (void)viewDidLoad
  {
      {
          UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
          scrollView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
          [self.view addSubview:scrollView];
          self.scrollView = scrollView;
      }
  
      {
          UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.scrollView.frame.size.width, self.scrollView.frame.size.height)];
          imageView.contentMode = UIViewContentModeScaleAspectFit;
          imageView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
          [self.scrollView addSubview:imageView];
          self.scrollView.contentSize = imageView.frame.size;
          self.imageView = imageView;
      }
  }
  
  - (void)viewDidLayoutSubviews
  {
      [super viewDidLayoutSubviews];
      [self layoutStripImageView];
  }
  
  - (void)layoutStripImageView
  { // Also called when the image finishes loading
      UIImage *image = self.imageView.image;
      if (! image) return;
  
      const CGSize imageSize = image.size;
      const CGFloat vh = self.scrollView.frame.size.height;
      const CGFloat scale = vh / imageSize.height;
      const CGFloat vw = imageSize.width * scale;
  
      CGSize imageViewSize = CGSizeMake(vw, vh);
      self.imageView.frame = CGRectMake(0, 0, imageViewSize.width, imageViewSize.height);
      self.scrollView.contentSize = imageViewSize;
  }
  </code></pre>
  
  <p>I'm trying really hard to move to autolayout but it's not being easy.</p>