title: 100% width on an absolute positioned image
body: <p>I have a div that is 50% the width of the screen and 100% height.</p>
  
  <p>I want to have an image placed at the bottom of the div that will adjust with the width.</p>
  
  <p>To set the position I use position: absolute; but this removed the auto width:</p>
  
  <p>code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
  }
  
  #full-size {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  
  #aaaaa {
    width: 50%;
    height: 100%;
    background: #0F0;
    float: left;
  }
  
  .bottomImage {
    width: auto !important;
    width: 100%;
    max-width: 100%;
    position: absolute;
    bottom: 0;
    width: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="full-size" class="clearfix"&gt;
  
    &lt;div id="aaaaa"&gt;
      &lt;img class="bottomImage" src="events_bottom.png" /&gt;
    &lt;/div&gt;
  
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there any way to have an image positioned absolute and adjust to container width?</p>