title: How do I use constraints / auto layout in Xcode's Interface Builder to properly scale images and fonts?
body: <p>I'm trying to make a user interface in Xcode's Interface Builder such that:</p>
  
  <ol>
  <li>It scales views based on the width of the device changing (aspect scaling)</li>
  <li>Images are scaled by aspect ratio (no stretched or squashed images)</li>
  <li>Fonts are scaled linearly</li>
  <li>If something is centered horizontally in one design, it should be centered in all designs</li>
  </ol>
  
  <p>Simple goals, I think… I have accomplished all of this programmatically using custom code previously, but I'd rather do it the "right way" and design this properly in Interface Builder and let it handle all of the layout for me.</p>
  
  <p>Let's say I have designed in Interface Builder a screen for a small form-factor iPhone like this:</p>
  
  <p><img src="https://i.imgur.com/H5hq4xS.png" alt="original layout"></p>
  
  <p>Now say this look and feel I'm happy with for iPhone 4s devices and would just like to scale everything up proportionally to the width for newer, larger iPhone form factors.</p>
  
  <p>If I were to use the older "springs and struts" method, this <em>almost</em> gives me what I want on a larger form factor... except that everything stretches height-wise (not simply based on aspect ratio of original design's width to height.) You can notice particularly the "logo image" is stretched too tall. And the fonts aren't being scaled up on labels or buttons either.</p>
  
  <p><img src="https://i.imgur.com/Vsf0tck.png" alt="scaled without changes"></p>
  
  <p>I've also tried using "constraints", particularly just tackling the issue of image scaling proportionally, basing it on the aspect ratio of the container, and am not having any luck whatsoever.</p>
  
  <p>Here I reset the springs and struts to their defaults, and add constraint to the original design's logo image:</p>
  
  <p><img src="https://i.imgur.com/rLzQuCK.png" alt="original logo with aspect ratio constraint"></p>
  
  <p>Looking at the larger form factor, nothing has in fact changed:</p>
  
  <p><img src="https://i.imgur.com/kT4zgHx.png" alt="larger form factor with aspect ratio"></p>
  
  <p>(And yes, despite the fact there's layout errors reported, "fixing" them in any way has no net effect on the scaling / lack of scaling in the image.)</p>
  
  <p>So just to restate-- how do I do the following with Xcode / Interface Builder constraints?</p>
  
  <ol>
  <li>It scales views based on the width of the device changing (aspect scaling)</li>
  <li>Images are scaled by aspect ratio (no stretched or squashed images)</li>
  <li>Fonts are scaled linearly</li>
  <li>If something is centered horizontally in one design, it should be centered in all designs</li>
  </ol>
  
  <p>Thanks in advance.</p>