title: Image not resizing correctly using resizableImageWithCapInsets
body: <p>I am having difficulty working with/understanding the <code>resizableImageWithCapInsets</code></p>
  
  <p>I have setup a button as follows:</p>
  
  <pre><code>facebookLoginButton = [[UIButton alloc] initWithFrame:CGRectMake(10, 20, 300,50)];
  facebookLoginButton.autoresizingMask = UIViewAutoresizingFlexibleWidth;
  
  UIImage *facebookButton = [[UIImage imageNamed:@"FacebookLogin"]
                             resizableImageWithCapInsets:UIEdgeInsetsMake(20,90,20,56)];
  [facebookLoginButton setBackgroundImage:facebookButton forState:UIControlStateNormal];
  
  [facebookLoginButton setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
  [facebookLoginButton setTitle:NSLocalizedString(@"FacebookLoginButton", "Facebook Login Button") forState:UIControlStateNormal];
  [facebookLoginButton setTitleShadowColor:[UIColor colorWithRed:0 green:0 blue:0 alpha:.35] forState:UIControlStateNormal];
  [facebookLoginButton addTarget:self action:@selector(facebookLoginButton:) forControlEvents:UIControlEventTouchUpInside];
  </code></pre>
  
  <p>As you can see above the frame for the button view is 300x50 pixels. I have created an image for retina (then will scale down later).</p>
  
  <p>The image is a png created in PS, sized 144x100px. That is double the height of the frame (for uibutton) and the width necessary to have the Facebook F, with space. The idea is to have the F stay static on the left and the stretchable part as highlighted below.</p>
  
  <p><img src="https://i.stack.imgur.com/LQrNL.png" alt="enter image description here"></p>
  
  <p>Here is the image itself if that helps;</p>
  
  <p><img src="https://i.stack.imgur.com/wLOvk.png" alt="enter image description here"></p>
  
  <p>Here is the current outcome:</p>
  
  <p><img src="https://i.stack.imgur.com/aZ5XS.png" alt="enter image description here"></p>
  
  <p>I am trying to find out the correct insets to enter. I have searched through a load of tutorials on this but none have explained enough for me to understand how the insets actually work. If anyone could explain this or link to a tutorial on how they are calculated that would be even better.</p>
  
  <p>I have currently set the top and bottom as 0 as in theory they do not need repeating, just a static left larger than the static right. The inset for the right is only for the rounded borders and the middle part needs repeating.</p>