title: Is there a way to have IMG width:100%, margin 10px automatically fit inside a div of fixed width without spilling out
body: <p>I have a div with a fixed width (can change, but use fixed as an example).  Text and Images will be displayed inside the div of varying sizes including 100% width.  Images will have a 10px margin.</p>
  <p>When I display a 100% width IMG, it spills outside of the div on the right side slightly.  Is there a CSS way (or other?) to automatically have the IMG display within the div, accounting for the 10px margin on either side and NOT spill outside, while keeping the width:100% value?</p>
  <p>I know I can workaround it by using a calculated amount, like width:94.5% (2nd image) for a 400px wide div container, but I would rather not have to do it this way as this results in recalculating every time the container width changes...maybe this is the best way after all?</p>
  <p>Don't want to use overflow:hidden, as this will give a cut-off look...</p>
  <p>Sample code:</p>
  <pre><code>&lt;style&gt;
  .editor {
      width:400px;
      border-style:solid;
  }
  .editor img {
      object-fit: cover;
      object-position: top;
      display: block;
      margin:10px;
      border-style:solid;
  }
  &lt;/style&gt;
  &lt;div class=&quot;editor&quot;&quot;&gt;
      &lt;p&gt;Spills over&lt;/p&gt;
      &lt;img style=&quot;width:100%&quot; src=&quot;http://www.google.com.br/images/srpr/logo3w.png&quot;&gt;
      &lt;p&gt;Looks right, but uses odd calculated width&lt;/p&gt;
      &lt;img style=&quot;width:94.5%&quot; src=&quot;http://www.google.com.br/images/srpr/logo3w.png&quot;&gt;
  &lt;/div&gt;
  </code></pre>