title: Make an image always display fully and responsively inside a fixed container?
body: <p>I have the following html:</p>
  <pre><code>&lt;div class=&quot;me&quot;&gt;
      &lt;img src=&quot;IndianRemovalAct-final.jpg&quot;&gt;
  &lt;/div&gt;
  </code></pre>
  <p>and the following styles:</p>
  <pre><code>.me {
    position: fixed;
    height: 100%;
    width: 100%;
  }
  
  /* method 1*/
  img {
    width: 100%;
    height: auto;
  }
  
  /* method 2*/
  img {
    width: auto;
    height: 100%;
  }
  </code></pre>
  <p>I tried the above two ways to make the image responsive. However, if I make the browser narrower or shorter, part of the image is outside the viewport. I want to display the image fully and responsively inside its fixed-positioned container. The image is quite big and I am just doing the implementation.</p>