title: Keep mobile browser from showing elements outside content bounds?
body: <p>In order to illustrate my problem, take a look at the following fiddle: <a href="http://jsfiddle.net/ECaD6/" rel="nofollow noreferrer">http://jsfiddle.net/ECaD6/</a></p>
  
  <p>Pretend that I have made this webpage where the center (dark grey) area is the main content of the page. The background of this content area is purposely a different color than the sides of the container that do not contain any content.</p>
  
  <p>I have placed an image absolutely, so that it lies outside the bounds of the intended content area. This works and looks good on a desktop browser.</p>
  
  <p>However, when viewed in a mobile browser, the user can zoom out on the page so that they see this:</p>
  
  <p><img src="https://i.stack.imgur.com/daymE.png" alt="enter image description here"></p>
  
  <p>I would like it if the browser could only zoom out only as wide as the content container. Is this possible? I could obviously put a <code>overflow-x:hidden</code> on the <code>div</code> but then it would actually cut off the soccer ball altogether.</p>
  
  <p>Would be nice if the mobile browser could only zoom out this far:
  <img src="https://i.stack.imgur.com/Kfypf.png" alt="enter image description here"></p>
  
  <p>I know that technically the image (in this case) is part of the 'content' since it's in the content div. I'm wondering if there are any layout or css tricks that could be used to achieve what I'm looking for.</p>