title: css crop an image then scale by percentage
body: <p>I am trying to crop a (non background) image then scale that cropped image by a percentage of the body. The idea I have is to combine all logos and basic graphics on my website into one image so that the browser can cache the image (quicker after the fist download). I then want to scale relative to the body width so that my website will look the same ratio of the page width no matter what the user's monitor size.</p>
  
  <p>This may be easier if I give the html &amp; css then explain it after:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;style&gt;
      body
      {
          padding: 0px;
          margin: 0px;
          width: 100%
      }
      #crop1
      {
          float: left;
          overflow: hidden;
          border: 1px solid red;
          clear: both;
      }
      #crop1 img
      {
          vertical-align: middle;
          margin: -28px 0px -88px -189px; /*top right bottom left*/
      }
      #scale1
      {
          width: 10%;
          border: 1px solid blue;
      }
      #scale1 img
      {
          vertical-align: middle;
          width: 100%;
      }
      #crop2
      {
          float: left;
          overflow: hidden;
          border: 1px solid green;
          width: 100%;
      }
      #crop2 img
      {
          vertical-align: middle;
          margin: -28px 0px -88px -189px; /*top right bottom left*/
      }
      #scale2
      {
          width: 10%;
          border: 1px solid orange;
          clear: both;
      }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;img src="http://www.mathleague.com/help/geometry/IMG00088.gif"&gt;
      &lt;div id="scale1"&gt;&lt;img src="http://www.mathleague.com/help/geometry/IMG00088.gif"&gt;&lt;/div&gt;
      &lt;div id="crop1"&gt;&lt;img src="http://www.mathleague.com/help/geometry/IMG00088.gif"&gt;&lt;/div&gt;
      &lt;div id="scale2"&gt;&lt;div id="crop2"&gt;&lt;img src="http://www.mathleague.com/help/geometry/IMG00088.gif"&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I've used the image <code>http://www.mathleague.com/help/geometry/IMG00088.gif</code> in this example. I'm not going to use this image in my website, but the principle will be the same.</p>
  
  <p>So first I just put in the original image, unchanged, to give a size reference while debugging:</p>
  
  <pre><code>&lt;img src="http://www.mathleague.com/help/geometry/IMG00088.gif"&gt;
  </code></pre>
  
  <p>Scaling a separate image down to 10% of the page width works fine:</p>
  
  <pre><code>&lt;div id="scale1"&gt;
      &lt;img src="http://www.mathleague.com/help/geometry/IMG00088.gif"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And cropping the image down to show just the oval shape also works fine:</p>
  
  <pre><code>&lt;div id="crop1"&gt;
      &lt;img src="http://www.mathleague.com/help/geometry/IMG00088.gif"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But I cannot shrink just the oval down to 10% of the page width:</p>
  
  <pre><code>&lt;div id="scale2"&gt;
      &lt;div id="crop2"&gt;
          &lt;img src="http://www.mathleague.com/help/geometry/IMG00088.gif"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>(This crops the oval down to the 10% width, instead of scaling it). Maybe I'm missing some simple css properties on this last line, or maybe I need to add more <code>div</code>s. I'm stuck.</p>
  
  <p>Here is the example image:<br>
  <img src="https://i.stack.imgur.com/sDKls.gif" alt="Example image"> </p>
  
  <p><strong>note: the solution must be cross-browser compatible</strong></p>